无需登录 数据私有 本地保存

CSS overscroll-behavior 演示 - 控制滚动链接效果

CSS 开发工具 CSS overscroll-behavior 滚动 演示
8
0
0
0

CSS overscroll-behavior 演示

直观理解滚动链接（Scroll Chaining）的控制方式

在内层方块区域滚动到边界，观察外层条纹是否跟随滚动
⬆ 外层可滚动区域 ⬇
🔺 到达顶部边界 🔻 到达底部边界
列表项 #1 — 向下滚动我
列表项 #2
列表项 #3
列表项 #4
列表项 #5
列表项 #6
列表项 #7
列表项 #8
列表项 #9 — 到达底部 ↑
外层底部 — 继续滚动外层
检测到可能的滚动链接：内层滚动已传递到外层！尝试设置 overscroll-behavior: contain 来阻止。
在模态框内滚动到边界，观察背景页面是否跟随滚动
⬆ 背景页面内容（可滚动）⬇

这是背景页面的内容区域。当模态框打开时，用户可能在模态框内滚动。如果模态框的 overscroll-behavior 为 auto，滚动到模态框边界后会触发背景页面滚动——这通常不是期望的行为。

📄 更多背景内容...
📄 背景内容区块
检测到滚动穿透：模态框滚动已传递到背景！建议设置 overscroll-behavior: contain。
控制面板
overscroll-behavior-y: auto; /* 内层 */ overscroll-behavior-y: auto; /* 外层 */
内层: auto — 允许滚动链接 外层: auto — 允许滚动链接
常见问题与知识点
overscroll-behavior 是一个CSS属性，用于控制浏览器在滚动到达容器边界时的行为。它决定是否将滚动操作传递（链接）给父级滚动容器，以及是否触发浏览器的默认边界行为（如移动端的下拉刷新、橡皮筋弹性效果等）。它有三个可能的值：auto（默认，允许滚动链接）、contain（阻止滚动链接但保留弹性效果）、none（完全阻止滚动链接和弹性效果）。
最常见的场景包括：
① 模态框/对话框：防止在模态框内滚动到边界时触发背景页面滚动；
② 侧边栏/抽屉菜单：防止在侧边栏内滚动时影响主内容区；
③ 移动端下拉刷新：使用 body { overscroll-behavior: none; } 禁用浏览器的下拉刷新手势；
④ 嵌套滚动区域：当页面有多个嵌套的可滚动区域时，精确控制滚动边界行为。
  • auto：默认值。滚动到边界后，剩余滚动动量会传递给父级容器（滚动链接），并触发浏览器默认边界效果。
  • contain：阻止滚动链接，但保留浏览器默认的边界效果（如iOS的橡皮筋弹性效果）。父级容器不会因为子容器的边界滚动而移动。
  • none：完全阻止滚动链接，同时禁用浏览器默认的边界效果（无橡皮筋、无下拉刷新触发）。提供最严格的滚动隔离。
兼容性良好：Chrome 63+、Firefox 59+、Safari 16+、Edge 79+、Opera 50+。iOS Safari 从16版本开始支持，Android Chrome早已支持。目前全球覆盖率超过95%。对于不支持的旧浏览器，该属性会被忽略，滚动行为回退到默认的auto模式，不会造成功能损坏，属于渐进增强特性。
在全局样式中添加：
body { overscroll-behavior-y: none; }
或者使用简写：
body { overscroll-behavior: none; }
这会禁用移动端浏览器的下拉刷新手势和橡皮筋弹性效果。注意：这会影响整个页面的体验，建议仅在PWA或需要精确控制滚动的应用中使用。
这两个是逻辑属性，用于适应不同的书写模式和文本方向：
overscroll-behavior-inline 控制行内方向（在水平书写模式下对应X轴）；
overscroll-behavior-block 控制块级方向（在水平书写模式下对应Y轴）。
对于从左到右的常规网页，它们分别等同于 overscroll-behavior-x 和 overscroll-behavior-y。使用逻辑属性可以使代码在不同语言环境下更具适应性。
Bootstrap 5.3 已经在 .modal 组件中默认使用了 overscroll-behavior: contain，以防止模态框打开时背景页面跟随滚动。你可以直接在自定义组件中使用该属性。Bootstrap也提供了工具类思路：你可以自定义如 .ob-contain 等工具类来快速应用该属性。在本次演示中，你看到的效果与Bootstrap模态框的滚动隔离机制原理一致。

💡 提示：在移动设备或使用触控板时，滚动链接效果更加明显。桌面端鼠标滚轮也可观察到差异。尝试切换不同预设场景来感受变化。

🔧 相关工具