CSS 属性

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

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

属性值

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

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

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

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

适用范围

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

语法

overscroll-behavior-block =  contain | auto | none

CSS overscroll-behavior-block: contains 

以下示例演示了 overscroll-behavior-block: contains 的使用，将滚动效果设置为包含它所应用的元素。因此，当到达可滚动元素的块边界时，滚动时，父元素不会滚动。

<html>
<head>
<meta name="viewport" content="width=device-width" />
<style>
   main {
      height: 2500px;
      width: 100%;
      background-color: slateblue;
   }

   main > div {
      height: 200px;
      width: 400px;
      overflow: auto;
      position: relative;
      top: 50px;
      left: 50px;
      overscroll-behavior-block: contain;
   }

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

   p {
      padding: 10px;
      background-color: rgba(0, 0, 150, 0.2);
      margin: 0;
      width: 250px;
      position: relative;
      top: 10px;
      left: 2%;
   }
</style>
</head>
<body>
   <h1>overscroll-behavior-block 属性</h1>
   <main>
      <h3>滚动小框内的内容并继续滚动。</h3>
      <div>
         <div>
            <p>
                   <b>overscroll-behavior-block</b> 定义垂直滚动区域行为。
             该值包含防止父元素滚动。 从而防止滚动链体验。

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

CSS overscroll-behavior-block: 值比较

以下示例演示了 overscroll-behavior-block 的使用。有两个内容相同的框，但其中一个设置了contain值，另一个为默认值 auto。可以看到两个框中滚动行为的比较。具有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-auto {
      background-color: pink;
   }

   #box-contain {
      background-color: aliceblue;
      overscroll-behavior: contain;
   }
   
   #main-box > div {
      flex: 1;
      height: 150px;
   }
</style>
</head>
<body>
   <h1>overscroll-behavior-block 属性</h1>
      <p>下面显示的两个框分别将 overscroll-behavior-block 设置为 auto 和 contains。</p>
    <p>使用鼠标滚动第一个粉红色框，一旦完全滚动，继续滚动并看到父元素滚动。</p>
    <p>使用鼠标滚动第二个白色框，一旦完全滚动，继续滚动并看到父元素没有滚动。</p>
   <div id="main-box">
   <div id="box-auto">
      <h3>overscroll-behavior-block: auto</h3>
      <p>CSS 是“层叠样式表”的缩写。 它是一种样式表语言，用于描述用 HTML 等标记语言编写的文档的表示形式。 CSS 帮助 Web 开发人员控制网页的布局和其他视觉方面。 CSS 在现代 Web 开发中发挥着至关重要的作用，它提供了创建具有视觉吸引力、可访问性和响应式网站所需的工具。
      </p>
   </div>
   <div id="box-contain">
      <h3>overscroll-behavior-block: contain</h3>
      <p>CSS 是“层叠样式表”的缩写。 它是一种样式表语言，用于描述用 HTML 等标记语言编写的文档的表示形式。 CSS 帮助 Web 开发人员控制网页的布局和其他视觉方面。 CSS 在现代 Web 开发中发挥着至关重要的作用，它提供了创建具有视觉吸引力、可访问性和响应式网站所需的工具。
      </p>
   </div>
   </div>
</body>
</html>