CSS滚动链（Scroll Chaining）：`overscroll-behavior`控制滚动传播的底层机制 - 智猿学院-前后端，数据库，人工智能，云计算等领域前沿技术讲座

CSS 滚动链（Scroll Chaining）：`overscroll-behavior` 控制滚动传播的底层机制

大家好，今天我们来深入探讨一个在现代 Web 开发中越来越重要的概念：CSS 滚动链，以及控制滚动链行为的关键属性：overscroll-behavior。滚动链，也称为滚动穿透或滚动溢出，指的是当一个滚动容器到达其滚动边界时，滚动操作继续传递到其父容器或更高级别的祖先容器的现象。理解滚动链对于构建流畅、直观的用户界面至关重要，尤其是在移动端和复杂 Web 应用中。

一、滚动链的默认行为与潜在问题

在没有 overscroll-behavior 干预的情况下，浏览器默认会按照以下逻辑处理滚动事件：

滚动容器滚动到尽头： 当用户尝试在滚动容器（例如设置了 overflow: auto 或 overflow: scroll 的 div）中滚动时，如果滚动条到达了顶部或底部（或其他滚动方向上的尽头），滚动容器将无法再继续滚动。
滚动事件传递： 此时，滚动事件会“穿透”该滚动容器，并传递到其父容器。如果父容器也是一个滚动容器，并且可以继续滚动，则父容器会开始滚动。
继续传递： 这个过程会沿着 DOM 树向上继续，直到到达根元素 <html>，或者遇到一个无法滚动的元素。

这种默认行为在某些情况下非常有用，例如在移动端，当用户滚动到一个弹窗的底部时，可以继续滚动底层的页面，而无需先关闭弹窗。然而，在其他情况下，这种行为可能会导致用户体验问题：

意外的页面滚动： 用户可能希望在弹窗或侧边栏中滚动，但由于滚动穿透，底层页面也开始滚动，导致页面内容错位或分散注意力。
复杂布局中的滚动冲突： 在具有多个嵌套滚动容器的复杂布局中，滚动链可能会导致滚动操作的行为难以预测，用户体验混乱。
移动端回弹效果： 在 iOS 等移动设备上，滚动到页面顶部或底部时，会出现一个回弹效果。滚动链会导致这个回弹效果传递到父元素，可能会产生不期望的视觉效果。

二、overscroll-behavior：控制滚动链的利器

overscroll-behavior 属性允许我们控制滚动链的行为，防止滚动事件穿透滚动容器。它接受三个主要的值：

auto (默认值): 滚动行为与默认滚动链行为相同。当滚动到达边界时，滚动链会传递到父元素。
contain: 阻止滚动链传递到父元素，但允许浏览器显示其默认的滚动溢出效果（例如，Android 上的辉光效果或 iOS 上的回弹效果）。滚动仍然会在元素内部发生，但不会影响外部滚动区域。
none: 完全阻止滚动链传递到父元素，并且禁止浏览器显示任何滚动溢出效果。

overscroll-behavior 还可以分别设置水平（x）和垂直（y）方向上的滚动行为：

overscroll-behavior-x: 控制水平方向上的滚动链。
overscroll-behavior-y: 控制垂直方向上的滚动链。

可以使用 overscroll-behavior: x y 的简写形式同时设置两个方向的值。例如：overscroll-behavior: contain none; 表示在水平方向上阻止滚动链，但在垂直方向上允许滚动链。

三、overscroll-behavior 的具体用法与示例

为了更好地理解 overscroll-behavior 的用法，我们来看几个具体的示例。

示例 1：阻止弹窗滚动导致底层页面滚动

假设我们有一个弹窗，当用户滚动到弹窗底部时，我们不希望底层页面也跟着滚动。我们可以使用 overscroll-behavior: contain; 或 overscroll-behavior: none; 来阻止滚动链：

<!DOCTYPE html>
<html>
<head>
<title>overscroll-behavior Example</title>
<style>
body {
  height: 200vh; /* 让页面可以滚动 */
}

.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
}

.modal {
  width: 80%;
  max-width: 500px;
  background-color: white;
  padding: 20px;
  border-radius: 5px;
  overflow-y: auto; /* 允许弹窗内部滚动 */
  height: 50vh;
  overscroll-behavior: contain; /* 阻止滚动链传递到 body */
}

.content {
  height: 300vh; /* 使弹窗内部可以滚动 */
}
</style>
</head>
<body>
  <h1>Scrolling Page</h1>
  <p>Scroll this page.  Scroll down to trigger the modal.</p>

  <div class="overlay">
    <div class="modal">
      <h2>Modal Content</h2>
      <div class="content">
        <p>This is the modal content.  It's very long to enable scrolling within the modal.</p>
        <!-- 长内容 -->
        <p>... many more lines of content ...</p>
      </div>
    </div>
  </div>
</body>
</html>

在这个示例中，我们将 overscroll-behavior: contain; 应用于 .modal 元素。当用户在弹窗中滚动到顶部或底部时，滚动事件不会传递到 <body> 元素，因此底层页面不会滚动。如果改成 none，则在iOS设备上，弹窗内部滚动到底部或顶部时，不会出现回弹效果。

示例 2：在水平滚动容器中阻止垂直滚动链

假设我们有一个水平滚动容器，其中包含多个卡片。我们希望在水平滚动时，阻止垂直方向上的滚动链传递到父元素，避免意外的页面滚动：

<!DOCTYPE html>
<html>
<head>
<title>Horizontal Scroll with overscroll-behavior</title>
<style>
.container {
  display: flex;
  overflow-x: auto;
  overscroll-behavior-y: contain; /* 阻止垂直方向的滚动链 */
  height: 200px;
  width: 100%;
}

.card {
  width: 200px;
  height: 100%;
  background-color: #eee;
  margin-right: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
}

body {
  height: 150vh; /* 增加 body 的高度，以便可以滚动 */
}
</style>
</head>
<body>

<h1>Horizontal Scrolling Container</h1>

<div class="container">
  <div class="card">Card 1</div>
  <div class="card">Card 2</div>
  <div class="card">Card 3</div>
  <div class="card">Card 4</div>
  <div class="card">Card 5</div>
</div>

<p>Scroll the page to see the effect.</p>

</body>
</html>

在这个示例中，我们将 overscroll-behavior-y: contain; 应用于 .container 元素。当用户在水平滚动容器中垂直滚动时，滚动事件不会传递到 <body> 元素，因此页面不会滚动。

示例 3：完全禁用滚动溢出效果

某些情况下，我们可能需要完全禁用滚动溢出效果（例如，移动设备上的回弹效果）。我们可以使用 overscroll-behavior: none; 来实现这一点：

<!DOCTYPE html>
<html>
<head>
<title>Disable Overscroll Effects</title>
<style>
.scrollable {
  width: 300px;
  height: 200px;
  overflow: auto;
  overscroll-behavior: none; /* 禁止滚动链和滚动溢出效果 */
}

body {
  height: 150vh;
}
</style>
</head>
<body>

<h1>Scrollable Area</h1>

<div class="scrollable">
  <p>This is a scrollable area with overscroll-behavior set to none.</p>
  <p>Scroll to the top or bottom to see that there's no bounce effect.</p>
  <p>More content...</p>
  <p>Even more content...</p>
  <p>And even more content...</p>
</div>

</body>
</html>

在这个示例中，我们将 overscroll-behavior: none; 应用于 .scrollable 元素。当用户滚动到滚动区域的顶部或底部时，不会出现任何回弹效果。

四、overscroll-behavior 与 JavaScript 的交互

虽然 overscroll-behavior 是一个 CSS 属性，但它也会影响 JavaScript 中滚动事件的行为。例如，如果使用 overscroll-behavior: contain; 或 overscroll-behavior: none; 阻止了滚动链，那么 wheel 事件、touchmove 事件等与滚动相关的事件将不会传递到父元素。

这意味着，如果你的 JavaScript 代码依赖于监听父元素的滚动事件来执行某些操作，那么你需要考虑 overscroll-behavior 带来的影响。可能需要调整代码逻辑，例如将事件监听器添加到子元素上，或者使用其他方式来检测滚动行为。

示例：使用 JavaScript 检测滚动到达边界

我们可以使用 JavaScript 来检测滚动容器是否到达了滚动边界，并执行相应的操作。以下代码演示了如何在滚动到顶部或底部时添加/移除特定的 CSS 类：

<!DOCTYPE html>
<html>
<head>
<title>Scroll Boundary Detection</title>
<style>
.scrollable {
  width: 300px;
  height: 200px;
  overflow: auto;
  overscroll-behavior: contain;
}

.scrollable.at-top {
  border-top: 2px solid green;
}

.scrollable.at-bottom {
  border-bottom: 2px solid blue;
}

body {
  height: 150vh;
}
</style>
</head>
<body>

<h1>Scrollable Area</h1>

<div class="scrollable">
  <p>This is a scrollable area.</p>
  <p>Scroll to the top or bottom to see the border change.</p>
  <p>More content...</p>
  <p>Even more content...</p>
  <p>And even more content...</p>
</div>

<script>
const scrollable = document.querySelector('.scrollable');

scrollable.addEventListener('scroll', () => {
  if (scrollable.scrollTop === 0) {
    scrollable.classList.add('at-top');
  } else {
    scrollable.classList.remove('at-top');
  }

  if (scrollable.scrollHeight - scrollable.scrollTop === scrollable.clientHeight) {
    scrollable.classList.add('at-bottom');
  } else {
    scrollable.classList.remove('at-bottom');
  }
});
</script>

</body>
</html>

在这个示例中，我们监听 .scrollable 元素的 scroll 事件。当滚动到顶部时，我们添加 at-top 类，当滚动到底部时，我们添加 at-bottom 类。这样，我们就可以根据滚动位置动态地改变元素的样式。

五、overscroll-behavior 的兼容性

overscroll-behavior 属性具有良好的浏览器兼容性，几乎所有现代浏览器都支持它，包括 Chrome, Firefox, Safari, Edge 以及移动端的浏览器。然而，为了兼容旧版本的浏览器，你可以考虑使用 polyfill 或提供备用方案。

表格：overscroll-behavior 浏览器兼容性

浏览器	支持版本
Chrome	63+
Firefox	59+
Safari	11.1+
Edge	79+
iOS Safari	11.3+
Android Chrome	63+

六、overscroll-behavior 的最佳实践

谨慎使用 overscroll-behavior: none;： 虽然 overscroll-behavior: none; 可以完全禁用滚动溢出效果，但它可能会降低用户体验，特别是在移动端。用户可能会习惯了滚动时的回弹效果，禁用它可能会让他们感到不自然。
根据具体情况选择合适的值： auto、contain 和 none 各有其适用场景。根据你的具体需求，选择最合适的值。如果你只是想阻止滚动链，但仍然希望保留滚动溢出效果，那么 contain 是一个不错的选择。
测试不同设备和浏览器： 由于不同设备和浏览器对滚动行为的处理方式可能略有不同，因此在部署之前，务必在不同的设备和浏览器上测试你的代码，确保用户体验一致。
考虑可访问性： 在禁用滚动链或滚动溢出效果时，要确保你的网站仍然具有良好的可访问性。例如，确保用户仍然可以通过键盘或其他辅助设备来滚动内容。

七、理解并灵活运用，打造更好的滚动体验

overscroll-behavior 是一个强大的 CSS 属性，可以帮助我们更好地控制滚动链的行为，从而提升用户体验。通过理解其原理、掌握其用法，并在实践中不断探索，我们可以构建出更加流畅、直观的 Web 应用。记住，最佳实践的关键在于根据具体场景选择最合适的值，并在不同设备和浏览器上进行充分测试。

更多IT精英技术系列讲座，到智猿学院

CSS 滚动链（Scroll Chaining）：overscroll-behavior 控制滚动传播的底层机制

发表回复 取消回复

CSS 滚动链（Scroll Chaining）：`overscroll-behavior` 控制滚动传播的底层机制

发表回复取消回复