CSS 属性

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

您可以参考 overscroll-behavior 了解详细信息。

属性值

CSS 属性 overscroll-behavior-inline 被定义为关键字下面给出的列表。

  • auto: 默认滚动行为是正常的。

  • contain: 滚动行为仅在设置该值的元素中可见。相邻元素上没有设置滚动。

  • none: 没有看到滚动链接行为。避免默认的滚动溢出行为。

适用范围

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

语法

overscroll-behavior-inline =  contain | auto | none

CSS overscroll-behavior-inline: contains 

以下示例演示了 overscroll-behavior-inline: contains 的使用，设置包含的水平滚动效果

<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 属性</h1>
   <main>
      <div>
      <div>
         <p>
         <b>overscroll-behavior-inline</b> 定义水平滚动（内联）区域行为。
         该值contain防止父元素滚动。 从而防止滚动链体验。

         </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 属性</h1>
   <main>
      <div>
      <div>
         <p>
         <b>overscroll-behavior-inline</b> 定义水平滚动（内联）区域行为。
         值 auto 设置在可滚动元素的内联边界被拉动后滚动的父元素。
          从而赋予滚动链体验。

         </p>
      </div>
      </div>
   </main>
</body>
</html>