CSS 属性

CSS 属性 overscroll-behavior-x 决定浏览器在到达滚动区域的水平边界时执行的操作。

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

属性值

CSS 属性 overscroll-behavior-x 被定义为给定的关键字之一

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

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

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

适用范围

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

语法

overscroll-behavior-x = contain | auto | none

CSS overscroll-behavior-x: contains 

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

<html>
<head>
<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-x: 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-x 属性</h1>
   <main>
      <div>
      <div>
         <p>
         <b>overscroll-behavior-x</b> 定义水平滚动区域的行为。
         该值contain防止父元素滚动。 从而防止滚动链体验。
         </p>
      </div>
      </div>
   </main>
</body>
</html>

CSS overscroll-behavior-x: auto 

以下示例演示了使用 overscroll-behavior-x: auto 将滚动效果设置为默认值，浏览器决定在到达其所应用的元素的边界时滚动父元素。

<html>
<head>
<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-x: auto;
   }

   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-x 属性</h1>
   <main>
      <div>
      <div>
         <p>
         <b>overscroll-behavior-x: auto</b> 定义水平滚动区域的行为。
         auto 的行为类似于正常的滚动行为。 这是默认值。
         </p>
      </div>
      </div>
   </main>
</body>
</html>