CSS - overscroll-behavior

CSS 属性 overscroll-behavior 是一个简写属性，用于确定当浏览器到达滚动区域的边界时会发生什么。

此属性的组成属性为 overscroll-behavior-x 和 overscroll-behavior-y。

滚动链 是当用户滚动到可滚动元素的边界（顶部、底部、左侧或右侧）之外时观察到的行为，从而导致祖先元素上的滚动。这会产生连锁滚动的效果。

例如，如果您在网页上有一个模态对话框，其中包含可以垂直滚动的内容。当您到达此模态的可滚动区域的末尾时，滚动将继续在模态对话框后面的主页内容上进行。这种连续的滚动体验称为滚动链。

这种行为可能是或可能不是理想的，为了避免这种情况，使用 overscroll-behavior 属性。该属性仅应用于 可滚动容器。在 <iframe> 上设置此属性无效，因此需要在 iframe 文档的 <html> 和 <body> 元素上都设置它。

可能的值

CSS 属性 overscroll-behavior 定义为一个或两个如下所示的关键字。两个关键字分别指定 x 和 y 轴上的值。当仅指定一个值时，x 和 y 轴具有相同的值。

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

应用于

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

语法

overscroll-behavior = [ contain | auto | none ]{1,2}

CSS overscroll-behavior - auto 值

以下示例演示了 overscroll-behavior: auto 的用法，该用法将滚动效果设置为连续。因此，当到达可滚动元素的边界时，在滚动时，父元素会滚动。

<html>
<head>
<style>
   div {
      margin: 5px 15px;
      padding: 3px;
      border: solid black 1px;
      overflow: auto;
      border: 2px solid black;
   }

   #main-box {
      display: flex;
      flex-wrap: wrap;
      background-color: cornsilk;
      height: 800px;
   }

   #box-1 {
      background-color: lightblue;
      overscroll-behavior: auto;
   }

   #main-box > div {
      flex: 1;
      height: 150px;
   }
</style>
</head>
<body>
   <h1>overscroll-behavior Property</h1>
   <p>The box displayed below has overscroll-behavior set as auto, which is the default value.</p>
   <p>Scroll the blue box using the mouse and once it is scrolled completely keep scrolling and see the parent element gets scrolled.</p>

   <div id="main-box">
      <div id="box-1">
         <h2>overscroll-behavior: auto</h2>
         <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos voluptatum adipisci harum? Repudiandae doloribus aspernatur ex odit rem quasi eligendi perspiciatis impedit porro reiciendis? Ipsa fugit reprehenderit nesciunt quae voluptates, labore ducimus iste consectetur quibusdam sapiente modi et ab reiciendis assumenda ullam, voluptatibus maiores sunt cupiditate amet. Magnam vel explicabo tempora ad numquam cumque soluta aliquid dolore, ducimus et obcaecati perferendis voluptatibus beatae quasi, facilis nihil culpa dolorum modi officia ab similique at. Iure ab, eius amet similique quaerat tempore, exercitationem aperiam fugiat pariatur error ratione laborum autem nam neque quae quo sed ipsam ullam animi officiis. Magnam assumenda facere similique molestiae harum ratione, esse, laboriosam cum vel quisquam labore est tenetur vero quas ex eum atque voluptatibus temporibus voluptate iste ipsam fugiat reiciendis dolor velit. Delectus molestiae deleniti quam, nisi ullam perspiciatis doloribus dolore dolores, ratione, reprehenderit rerum. Saepe ex, maiores reiciendis aperiam laudantium ipsa ipsam iure amet aliquid at suscipit labore voluptate et iste architecto fugit esse est a eum dicta asperiores error exercitationem minus. Praesentium voluptatem recusandae accusamus veritatis voluptate! Officia nostrum esse vitae fuga odit ab optio quia autem consequuntur, ea modi dignissimos enim assumenda voluptatibus maxime explicabo aliquid repellendus magni molestias hic dolores earum tenetur.</p>
      </div>
   </div>
</body>
</html>

CSS overscroll-behavior - 值比较

以下示例演示了 overscroll-behavior: contain 的用法，该用法将滚动效果限制在应用它的元素中。因此，当到达可滚动元素的边界时，在滚动时，父元素不会滚动。

<html>
<head>
<style>
   div {
  margin: 5px 15px;
  padding: 3px;
  border: solid black 1px;
  overflow: auto;
  border: 2px solid black;
}
   #main-box {
      display: flex;
      flex-wrap: wrap;
      background-color: darkcyan;
      height: 800px;
   }

   #box-1 {
      background-color: pink;
   }

   #box-2 {
      background-color: aliceblue;
      overscroll-behavior: contain;
   }
   #main-box > div {
  flex: 1;
  height: 150px;
}
</style>
</head>
<body>
   <h1>overscroll-behavior Property</h1>
   <p>The two boxes displayed below has overscroll-behavior set as auto and contain, respectively.</p>
   <p>Scroll the first pink box using the mouse and once it is scrolled completely keep scrolling and see the parent element gets scrolled.</p>
   <p>Scroll the second white box using the mouse and once it is scrolled completely keep scrolling and see the parent element not getting scrolled.</p>
   <div id="main-box">
   <div id="box-1">
      <h3>overscroll-behavior: auto</p>
      <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos voluptatum adipisci harum? Repudiandae doloribus aspernatur ex odit rem quasi eligendi perspiciatis impedit porro reiciendis? Ipsa fugit reprehenderit nesciunt quae voluptates, labore ducimus iste consectetur quibusdam sapiente modi et ab reiciendis assumenda ullam, voluptatibus maiores sunt cupiditate amet. Magnam vel explicabo tempora ad numquam cumque soluta aliquid dolore, ducimus et obcaecati perferendis voluptatibus beatae quasi, facilis nihil culpa dolorum modi officia ab similique at. Iure ab, eius amet similique quaerat tempore, exercitationem aperiam fugiat pariatur error ratione laborum autem nam neque quae quo sed ipsam ullam animi officiis. Magnam assumenda facere similique molestiae harum ratione, esse, laboriosam cum vel quisquam labore est tenetur vero quas ex eum atque voluptatibus temporibus voluptate iste ipsam fugiat reiciendis dolor velit. Delectus molestiae deleniti quam, nisi ullam perspiciatis doloribus dolore dolores, ratione, reprehenderit rerum. Saepe ex, maiores reiciendis aperiam laudantium ipsa ipsam iure amet aliquid at suscipit labore voluptate et iste architecto fugit esse est a eum dicta asperiores error exercitationem minus. Praesentium voluptatem recusandae accusamus veritatis voluptate! Officia nostrum esse vitae fuga odit ab optio quia autem consequuntur, ea modi dignissimos enim assumenda voluptatibus maxime explicabo aliquid repellendus magni molestias hic dolores earum tenetur.
      </p>
   </div>
   <div id="box-2">
      <h3>overscroll-behavior: contain</p>
      <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos voluptatum adipisci harum? Repudiandae doloribus aspernatur ex odit rem quasi eligendi perspiciatis impedit porro reiciendis? Ipsa fugit reprehenderit nesciunt quae voluptates, labore ducimus iste consectetur quibusdam sapiente modi et ab reiciendis assumenda ullam, voluptatibus maiores sunt cupiditate amet. Magnam vel explicabo tempora ad numquam cumque soluta aliquid dolore, ducimus et obcaecati perferendis voluptatibus beatae quasi, facilis nihil culpa dolorum modi officia ab similique at. Iure ab, eius amet similique quaerat tempore, exercitationem aperiam fugiat pariatur error ratione laborum autem nam neque quae quo sed ipsam ullam animi officiis. Magnam assumenda facere similique molestiae harum ratione, esse, laboriosam cum vel quisquam labore est tenetur vero quas ex eum atque voluptatibus temporibus voluptate iste ipsam fugiat reiciendis dolor velit. Delectus molestiae deleniti quam, nisi ullam perspiciatis doloribus dolore dolores, ratione, reprehenderit rerum. Saepe ex, maiores reiciendis aperiam laudantium ipsa ipsam iure amet aliquid at suscipit labore voluptate et iste architecto fugit esse est a eum dicta asperiores error exercitationem minus. Praesentium voluptatem recusandae accusamus veritatis voluptate! Officia nostrum esse vitae fuga odit ab optio quia autem consequuntur, ea modi dignissimos enim assumenda voluptatibus maxime explicabo aliquid repellendus magni molestias hic dolores earum tenetur.
      </p>
   </div>
   </div>
</body>
</html>

CSS overscroll-behavior - 两个关键字值

以下示例演示了 overscroll-behavior: auto contain（两个值）的用法，该用法将 x 轴上的滚动效果设置为 auto，将 y 轴上的滚动效果设置为 contain。因此，当到达可滚动元素的垂直边界时，在滚动时，父元素不会滚动（因为设置为 contain），但水平边界设置为 auto，这会导致父元素在 x 轴上滚动。

<html>
<head>
<style>
   #main-box, #box-2 {
      margin: 15px;
      padding: 3px;
      border: solid black 1px;
      overflow: auto;
   }

   #main-box p {
      width: 200%;
   }

   #main-box {
      background-color: rgb(197, 255, 236);
      height: 1300px;
      width: 2000px;
   }

   #box-2 {
      float: left;
      height: 250px;
      width: 30%;
      background-color: rgb(255, 205, 213);
      overscroll-behavior: auto none;
   } 
</style>
</head>
<body>
   <h1>overscroll-behavior - Two value Syntax</h1>
   <p>The two value syntax is used with overscroll-behavior as auto on x axis and none on y-axis.</p>
   
   <div id="main-box">
   
   <div id="box-2">
      <h3>overscroll-behavior: auto none</p>
      <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos voluptatum adipisci harum? Repudiandae doloribus aspernatur ex odit rem quasi eligendi perspiciatis impedit porro reiciendis? Ipsa fugit reprehenderit nesciunt quae voluptates, labore ducimus iste consectetur quibusdam sapiente modi et ab reiciendis assumenda ullam, voluptatibus maiores sunt cupiditate amet. Magnam vel explicabo tempora ad numquam cumque soluta aliquid dolore, ducimus et obcaecati perferendis voluptatibus beatae quasi, facilis nihil culpa dolorum modi officia ab similique at. Iure ab, eius amet similique quaerat tempore, exercitationem aperiam fugiat pariatur error ratione laborum autem nam neque quae quo sed ipsam ullam animi officiis. Magnam assumenda facere similique molestiae harum ratione, esse, laboriosam cum vel quisquam labore est tenetur vero quas ex eum atque voluptatibus temporibus voluptate iste ipsam fugiat reiciendis dolor velit. Delectus molestiae deleniti quam, nisi ullam perspiciatis doloribus dolore dolores, ratione, reprehenderit rerum. Saepe ex, maiores reiciendis aperiam laudantium ipsa ipsam iure amet aliquid at suscipit labore voluptate et iste architecto fugit esse est a eum dicta asperiores error exercitationem minus. Praesentium voluptatem recusandae accusamus veritatis voluptate! Officia nostrum esse vitae fuga odit ab optio quia autem consequuntur, ea modi dignissimos enim assumenda voluptatibus maxime explicabo aliquid repellendus magni molestias hic dolores earum tenetur.
      </p>
   </div>
   </div>
</body>
</html>

CSS overscroll-behavior - 关联属性

下表列出了与 overscroll-behavior 属性关联的 CSS 属性

属性	描述
overscroll-behavior-x	设置浏览器到达滚动区域水平边界时的行为。
overscroll-behavior-y	设置浏览器到达滚动区域垂直边界时的行为。
overscroll-behavior-block	设置浏览器到达滚动区域块方向边界时的行为。
overscroll-behavior-inline	设置浏览器到达滚动区域内联方向边界时的行为。

打印页面