CSS overscroll-behavior：滚动链与回弹治理

---

title: CSS overscroll-behavior：滚动链与回弹治理

keywords:

• overscroll-behavior
• scroll chaining
• 回弹
• 模态滚动
• 触控体验

description: 使用 overscroll-behavior 控制滚动链与回弹，避免内部容器滚动引发页面滚动或系统回弹，提升模态与触控体验。

categories:

• 文章资讯
• 编程技术

---

概述

overscroll-behavior 控制滚动边界行为，contain/none 可阻止滚动链与回弹。适用于对话框、侧栏与嵌套滚动区域的交互治理。

用法/示例

.modal { overscroll-behavior: contain }
.scroll-pane { overscroll-behavior-y: none }

工程建议

• 按轴控制以减少副作用；在移动端验证触控与回弹差异。
• 与 position: fixed 与遮罩层协作，确保模态内滚动不影响页面。
• 在老旧或差异环境提供 JS 回退（阻止默认滚动）。

参考与验证

• MDN：overscroll-behavior — https://developer.mozilla.org/docs/Web/CSS/overscroll-behavior
• web.dev：Scroll chaining — https://web.dev/articles/scroll-chaining