好的，我们开始。
CSS 过度滚动行为：overscroll-behavior-y: contain 的深度剖析
今天我们来深入探讨 CSS 中的 overscroll-behavior 属性，特别是 overscroll-behavior-y: contain 这个值。它在阻止下拉刷新和链式滚动方面扮演着重要的角色，理解它的工作原理对于构建流畅、可控的用户界面至关重要。
什么是过度滚动行为？
过度滚动（Overscroll）是指当滚动容器到达其滚动边界（顶部或底部）时发生的行为。默认情况下，浏览器会允许“链式滚动”或“滚动穿透”，即当内部滚动容器到达边界时，滚动会传递到其父容器，甚至整个文档。在移动设备上，这通常表现为下拉刷新或上拉加载更多。
overscroll-behavior 属性允许我们控制这种默认行为，它有三个主要值：
auto：浏览器默认行为，允许链式滚动。contain：阻止链式滚动，但允许元素内部的滚动继续。none：阻止链式滚动，并阻止元素内部的滚动指示。
overscroll-behavior 还提供 overscroll-behavior-x 和 overscroll-behavior-y 属性，分别控制水平和垂直方向的过度滚动行为。
overscroll-behavior-y: contain 的作用机制
overscroll-behavior-y: contain 属性的作用是：当垂直方向的滚动容器到达其滚动边界时，阻止滚动传递到父元素。这意味着，当你滚动到容器顶部或底部时，不会触发浏览器的下拉刷新或页面滚动。
更具体地说，contain 值会阻止以下行为：
- 链式滚动（Chained Scrolling）: 当内部可滚动元素的滚动到达边界时，外部可滚动元素不应继续滚动。
- 下拉刷新（Pull-to-Refresh）: 在移动浏览器中，当页面滚动到顶部并继续下拉时，通常会触发下拉刷新功能。
overscroll-behavior-y: contain可以阻止这种行为。 - 滚动穿透（Scroll Chaining/Propagation）: 与链式滚动类似，滚动穿透是指滚动事件从一个元素传递到另一个元素。
contain值可以阻止这种传递。
为什么需要阻止默认的过度滚动行为？
在某些情况下，默认的过度滚动行为可能会破坏用户体验：
- 自定义下拉刷新: 如果你实现了自定义的下拉刷新或上拉加载更多功能，默认的浏览器行为可能会与之冲突。
- 模态框或覆盖层: 在模态框或覆盖层中，我们通常不希望滚动事件传递到后面的页面。
- 复杂布局: 在复杂的布局中，链式滚动可能会导致意外的滚动行为，使页面难以控制。
- 游戏或动画: 在游戏或动画中，我们通常需要精确控制滚动行为，不希望受到默认过度滚动的影响。
overscroll-behavior-y: contain 的应用场景
以下是一些 overscroll-behavior-y: contain 的典型应用场景：
-
模态框（Modal）:
<div class="modal-overlay"> <div class="modal-content"> <div class="scrollable-content"> <!-- 模态框内容 --> <p>这是一个很长的文本，需要滚动才能查看全部内容。</p> <p>这是一个很长的文本，需要滚动才能查看全部内容。</p> <p>这是一个很长的文本，需要滚动才能查看全部内容。</p> <p>这是一个很长的文本，需要滚动才能查看全部内容。</p> <p>这是一个很长的文本，需要滚动才能查看全部内容。</p> <p>这是一个很长的文本，需要滚动才能查看全部内容。</p> <p>这是一个很长的文本，需要滚动才能查看全部内容。</p> <p>这是一个很长的文本，需要滚动才能查看全部内容。</p> <p>这是一个很长的文本，需要滚动才能查看全部内容。</p> <p>这是一个很长的文本，需要滚动才能查看全部内容。</p> <p>这是一个很长的文本，需要滚动才能查看全部内容。</p> <p>这是一个很长的文本，需要滚动才能查看全部内容。</p> <p>这是一个很长的文本，需要滚动才能查看全部内容。</p> </div> </div> </div>.modal-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-content { background-color: white; padding: 20px; border-radius: 5px; width: 80%; max-width: 500px; } .scrollable-content { max-height: 300px; overflow-y: auto; overscroll-behavior-y: contain; /* 关键代码 */ }在这个例子中，
overscroll-behavior-y: contain应用于scrollable-content元素，以防止滚动穿透到模态框后面的页面。当滚动到达scrollable-content的顶部或底部时，不会滚动modal-overlay或body元素。 -
列表或表格:
<div class="list-container"> <ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> <li>Item 4</li> <li>Item 5</li> <li>Item 6</li> <li>Item 7</li> <li>Item 8</li> <li>Item 9</li> <li>Item 10</li> <li>Item 11</li> <li>Item 12</li> <li>Item 13</li> <li>Item 14</li> <li>Item 15</li> <li>Item 16</li> <li>Item 17</li> <li>Item 18</li> <li>Item 19</li> <li>Item 20</li> </ul> </div>.list-container { max-height: 200px; overflow-y: auto; overscroll-behavior-y: contain; }在这种情况下，
overscroll-behavior-y: contain可以防止滚动超出列表的范围，避免触发不必要的页面滚动或刷新。 -
自定义滚动条:
如果你使用 JavaScript 实现了自定义滚动条，
overscroll-behavior-y: contain可以帮助你更好地控制滚动行为，避免与浏览器的默认滚动行为冲突。 -
地图应用:
在地图应用中，我们通常不希望用户在拖动地图时意外地滚动到页面顶部或底部。
overscroll-behavior-y: contain可以防止这种行为。
与 JavaScript 的配合
虽然 overscroll-behavior-y: contain 主要是一个 CSS 属性，但它也可以与 JavaScript 结合使用，以实现更精细的控制。
例如，你可以使用 JavaScript 来检测滚动是否到达了容器的边界，并根据需要执行一些操作：
const scrollableContent = document.querySelector('.scrollable-content');
scrollableContent.addEventListener('scroll', () => {
const scrollTop = scrollableContent.scrollTop;
const scrollHeight = scrollableContent.scrollHeight;
const clientHeight = scrollableContent.clientHeight;
if (scrollTop === 0) {
// 到达顶部
console.log('到达顶部');
}
if (scrollTop + clientHeight === scrollHeight) {
// 到达底部
console.log('到达底部');
}
});在这个例子中，我们监听 scrollable-content 元素的 scroll 事件，并检查 scrollTop、scrollHeight 和 clientHeight 属性，以确定滚动是否到达了顶部或底部。
结合 overscroll-behavior-y: contain 和 JavaScript，你可以实现各种高级的滚动效果，例如：
- 平滑滚动: 使用 JavaScript 实现平滑滚动动画，并在滚动到达边界时停止。
- 无限滚动: 当滚动到达底部时，自动加载更多内容。
- 视差滚动: 创建视差滚动效果，并在滚动到达特定位置时触发动画。
兼容性考虑
overscroll-behavior 属性的兼容性良好，主流浏览器都支持它。
| 浏览器 | 支持版本 |
|---|---|
| Chrome | 63+ |
| Firefox | 59+ |
| Safari | 11.1+ |
| Edge | 79+ |
| Opera | 50+ |
| iOS Safari | 11.3+ |
| Android Chrome | 63+ |
对于不支持 overscroll-behavior 属性的旧版浏览器，可以使用 JavaScript 来模拟类似的行为。但是，这种方法通常比较复杂，并且可能无法完全模拟 overscroll-behavior 的效果。
替代方案和polyfill
在不支持 overscroll-behavior 的旧浏览器中，模拟 overscroll-behavior 的行为比较复杂，通常需要使用 JavaScript 监听滚动事件，并手动阻止默认行为。没有完美的 polyfill，但以下是一些常用的方法：
-
阻止触摸移动事件:
在触摸设备上，可以通过阻止
touchmove事件来阻止滚动。但这会完全禁用滚动，因此需要谨慎使用。document.addEventListener('touchmove', function(event) { event.preventDefault(); }, { passive: false }); // passive: false 是必要的，以允许 preventDefault()注意：
passive: false是必要的，以允许preventDefault()方法生效。否则，浏览器可能会忽略preventDefault()调用。 -
使用 JavaScript 监听滚动事件:
可以监听滚动事件，并根据滚动位置来手动阻止滚动穿透。
const element = document.querySelector('.scrollable-content'); element.addEventListener('scroll', function(event) { const scrollTop = element.scrollTop; const scrollHeight = element.scrollHeight; const clientHeight = element.clientHeight; if (scrollTop <= 0) { // 到达顶部，阻止滚动 element.scrollTop = 0; } if (scrollTop + clientHeight >= scrollHeight) { // 到达底部，阻止滚动 element.scrollTop = scrollHeight - clientHeight; } });这种方法需要手动计算滚动位置，并且可能会有一些性能问题。
-
使用第三方库:
有一些第三方库可以帮助你模拟
overscroll-behavior的行为。例如，iNoBounce.js。
最佳实践
以下是一些使用 overscroll-behavior-y: contain 的最佳实践：
- 只在需要时使用: 不要滥用
overscroll-behavior-y: contain。只在确实需要阻止链式滚动或下拉刷新时才使用它。 - 考虑用户体验: 在阻止默认的过度滚动行为时，要确保用户仍然可以方便地滚动页面。例如，你可以提供自定义的下拉刷新或上拉加载更多功能。
- 测试不同设备: 在不同的设备和浏览器上测试你的代码，以确保它能够正常工作。
- 结合 JavaScript: 结合 JavaScript 可以实现更精细的控制，并提供更好的用户体验。
实际案例分析
假设我们需要创建一个包含评论列表的页面，并且希望阻止用户在滚动到列表顶部时触发下拉刷新。我们可以使用 overscroll-behavior-y: contain 来实现这个目标。
<div class="comments-container">
<h2>评论</h2>
<ul class="comments-list">
<li>评论 1</li>
<li>评论 2</li>
<li>评论 3</li>
<li>评论 4</li>
<li>评论 5</li>
<li>评论 6</li>
<li>评论 7</li>
<li>评论 8</li>
<li>评论 9</li>
<li>评论 10</li>
<li>评论 11</li>
<li>评论 12</li>
<li>评论 13</li>
<li>评论 14</li>
<li>评论 15</li>
</ul>
</div>.comments-container {
max-height: 300px;
overflow-y: auto;
overscroll-behavior-y: contain;
}在这个例子中，overscroll-behavior-y: contain 应用于 comments-container 元素，以防止滚动穿透到页面顶部并触发下拉刷新。
overscroll-behavior 其他值的用法
overscroll-behavior 属性除了 contain 之外，还有 auto 和 none 两个值。理解它们之间的区别也很重要。
overscroll-behavior: auto: 这是默认值。它允许链式滚动，意味着当滚动到达元素的边界时，滚动会传递到父元素。overscroll-behavior: none: 这个值完全禁用了滚动穿透。不仅阻止了链式滚动，还阻止了浏览器显示任何滚动指示器（例如，在 iOS 上滚动到顶部或底部时出现的反弹效果）。应该谨慎使用none值，因为它可能会让用户感到困惑。
例如：
.no-overscroll {
overscroll-behavior: none;
}这个例子会完全禁用 .no-overscroll 元素的滚动穿透和滚动指示器。
深入理解 contain 值
contain 值是 overscroll-behavior 中最常用的值。它的行为可以概括为：
- 阻止链式滚动: 防止滚动事件传递到父元素。
- 允许元素内部的滚动: 元素内部的滚动仍然有效。
- 保留滚动指示器: 浏览器仍然会显示滚动指示器，例如在 iOS 上的反弹效果。
与 none 值相比，contain 值更加友好，因为它保留了滚动指示器，让用户知道他们已经到达了滚动边界。
常见问题解答
-
overscroll-behavior是否会影响性能？overscroll-behavior属性对性能的影响很小。浏览器通常会优化滚动行为，因此使用overscroll-behavior不会显著降低性能。 -
overscroll-behavior是否会影响键盘滚动？overscroll-behavior主要影响触摸和鼠标滚动。键盘滚动通常不受overscroll-behavior的影响。 -
如何检测浏览器是否支持
overscroll-behavior？可以使用 JavaScript 来检测浏览器是否支持
overscroll-behavior属性：if ('overscrollBehavior' in document.documentElement.style) { // 支持 overscroll-behavior console.log('支持 overscroll-behavior'); } else { // 不支持 overscroll-behavior console.log('不支持 overscroll-behavior'); }
总结
overscroll-behavior-y: contain 是一个强大的 CSS 属性，可以帮助我们控制滚动行为，防止链式滚动和下拉刷新。通过理解它的工作原理和应用场景，我们可以构建更加流畅、可控的用户界面。记住，只在需要时使用它，并考虑用户体验。overscroll-behavior-y: contain 主要用于模态框、列表、表格等，需要阻止页面滚动穿透的场景。
更多IT精英技术系列讲座，到智猿学院