CSS - overscroll-behavior-inline 属性

CSS 属性 overscroll-behavior-inline 用于确定当滚动区域的内联方向边界已到达时浏览器的行为。

您可以参考 overscroll-behavior 以获取详细信息。

可能的值

CSS 属性 overscroll-behavior-inline 定义为以下列表中的关键字。

auto − 默认滚动行为正常。
contain − 滚动行为仅在设置该值的元素中可见。相邻元素上没有设置滚动。
none − 没有看到滚动链行为。避免默认滚动溢出行为。

应用于

所有非替换块级元素和非替换内联块级元素。

语法

overscroll-behavior-inline =  contain | auto | none

CSS overscroll-behavior-inline - contain 值

以下示例演示了 overscroll-behavior-inline: contain 的用法，它将水平滚动效果设置为包含且非连续的。

<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<style>
   main {
      height: 500px;
      width: 2000px;
      background-color: slateblue;
   }

   main > div {
      height: 300px;
      width: 500px;
      overflow: auto;
      position: relative;
      top: 100px;
      left: 100px;
      overscroll-behavior-inline: contain;
   }

   div > div {
      height: 100%;
      width: 1500px;
      background-color: lightblue;
   }

   p {
      padding: 10px;
      background-color: rgba(0, 0, 150, 0.2);
      margin: 0;
      width: 300px;
      position: relative;
      top: 10%;
      left: 2%;
   }
</style>
</head>
<body>
   <h1>overscroll-behavior-inline Property</h1>
   <main>
      <div>
      <div>
         <p>
         <b>overscroll-behavior-inline</b> defines the horizontal scrolling (inline) area behavior.
         The value contain prevents the parent element getting scrolled. Thus preventing the 
         scrolling chain experience.
         </p>
      </div>
      </div>
   </main>
</body>
</html>

CSS overscroll-behavior-inline - auto 值

以下示例演示了 overscroll-behavior-inline: auto 的用法，它将水平滚动效果设置为像链条一样连续的。

<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<style>
   main {
      height: 500px;
      width: 5000px;
      background-color: rgb(220, 200, 100);
   }

   main > div {
      height: 300px;
      width: 500px;
      overflow: auto;
      position: relative;
      top: 100px;
      left: 100px;
      overscroll-behavior-inline: auto;
   }

   div > div {
      height: 100%;
      width: 1500px;
      background-color: lightgoldenrodyellow;
   }

   p {
      padding: 10px;
      background-color: rgba(100, 100, 100, 0.2);
      margin: 0;
      width: 300px;
      position: relative;
      top: 10%;
      left: 2%;
   }
</style>
</head>
<body>
   <h1>overscroll-behavior-inline: auto Property</h1>
   <main>
      <div>
      <div>
         <p>
         <b>overscroll-behavior-inline</b> defines the horizontal scrolling (inline) area behavior.
         The value auto sets the parent element getting scrolled after the inline boundary of the scrollable element has been raeched. 
         Thus giving the scrolling chain experience.
         </p>
      </div>
      </div>
   </main>
</body>
</html>

打印页面