CSS 属性

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 属性</h1>
   <p>下面显示的框将该属性设置为auto 默认属性</p>
   <p>使用鼠标滚动蓝色框，一旦完全滚动，继续滚动并看到父元素滚动。.</p>

   <div id="main-box">
      <div id="box-1">
         <h2>overscroll-behavior: auto</h2>
         <p>CSS 是“层叠样式表”的缩写。 它是一种样式表语言，用于描述用 HTML 等标记语言编写的文档的表示形式。 CSS 帮助 Web 开发人员控制网页的布局和其他视觉方面。 CSS 在现代 Web 开发中发挥着至关重要的作用，它提供了创建具有视觉吸引力、可访问性和响应式网站所需的工具。</p>
      </div>
   </div>
</body>
</html>

CSS overscroll-behavior: 值比较

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

<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 属性</h1>
      <p>下面显示的两个框的overscroll-behavior分别设置为auto和contain。</p>
    <p>使用鼠标滚动第一个粉红色框，一旦完全滚动，继续滚动并看到父元素滚动。</p>
    <p>使用鼠标滚动第二个白色框，一旦完全滚动，继续滚动并看到父元素没有滚动。</p>

   <div id="main-box">
   <div id="box-1">
      <h3>overscroll-behavior: auto</p>
      <p>CSS 是“层叠样式表”的缩写。 它是一种样式表语言，用于描述用 HTML 等标记语言编写的文档的表示形式。 CSS 帮助 Web 开发人员控制网页的布局和其他视觉方面。 CSS 在现代 Web 开发中发挥着至关重要的作用，它提供了创建具有视觉吸引力、可访问性和响应式网站所需的工具。
      </p>
   </div>
   <div id="box-2">
      <h3>overscroll-behavior: contain</p>
      <p>CSS 是“层叠样式表”的缩写。 它是一种样式表语言，用于描述用 HTML 等标记语言编写的文档的表示形式。 CSS 帮助 Web 开发人员控制网页的布局和其他视觉方面。 CSS 在现代 Web 开发中发挥着至关重要的作用，它提供了创建具有视觉吸引力、可访问性和响应式网站所需的工具。
      </p>
   </div>
   </div>
</body>
</html>

CSS overscroll-behavior: 两个关键字值

以下示例演示了用法overscroll-behavior: auto contains (两个值)，设置滚动效果在x轴上自动并在y轴上包含。因此，当到达可滚动元素的垂直边界时，在滚动时，父元素不会滚动（如包含的那样），但水平边界设置为自动，这会导致父元素在 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: 两个值的语法</h1>
   <p>两个值语法与过度滚动行为一起使用，在 x 轴上为 auto，在 y 轴上为 none。</p>
   
   <div id="main-box">
   
   <div id="box-2">
      <h3>overscroll-behavior: auto none</p>
      <p>CSS 是“层叠样式表”的缩写。 它是一种样式表语言，用于描述用 HTML 等标记语言编写的文档的表示形式。 CSS 帮助 Web 开发人员控制网页的布局和其他视觉方面。 CSS 在现代 Web 开发中发挥着至关重要的作用，它提供了创建具有视觉吸引力、可访问性和响应式网站所需的工具。
      </p>
   </div>
   </div>
</body>
</html>

CSS overscroll-behavior: 关联属性

下表列出了与过度滚动行为属性关联的 CSS 属性:

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