滚动溢出行为属性
最后更新：2026-09-13
overscroll-behavior 滚动溢出行为属性
overscroll-behavior 用于控制滚动容器滚动到边界时的溢出行为，例如是否将滚动事件传递给父容器（滚动链）或触发浏览器的默认行为（如刷新页面、前进后退）。它是解决嵌套滚动容器「滚动穿透」问题的关键属性。
| 分类 | |
|---|---|
| 初始值 | auto |
| 继承 | 否 |
| 适用于 | |
| 可动画 | |
| CSS 版本 | CSS3 |
| 状态 | 标准 |
📝 语法
overscroll-behavior: contain | none | auto;⚙️ 取值
| 值 | 类型 | 描述 |
|---|---|---|
contain | none | auto | 关键字 | 滚动边界行为 |
▶ 示例
编辑下方代码，在 playground 中查看实时效果：
🌐 浏览器支持
| 浏览器 |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| overscroll-behavior | ✓ v57 | ✓ v12 | ✓ v52 | ✓ v10.1 | ✓ v44 |
| 所有主流浏览器均支持 | |||||
提示： contain 会阻止滚动链，即容器内滚动到边界时不会带动外层滚动；none 还会阻止浏览器的默认边界行为（如 iOS 的弹性滚动）。
提示： 弹窗、侧边栏、浮动面板等嵌套滚动场景建议设置 overscroll-behavior: contain，避免用户滚动时误操作页面主体。
❓ 常见问题
Qoverscroll-behavior 和 touch-action 有什么区别？
Aoverscroll-behavior 控制滚动到边界后滚动链怎么传递——是否带动外层容器、是否触发浏览器行为（刷新、回弹）；touch-action 控制浏览器对触摸手势的响应——是否允许平移、缩放、双击缩放。前者针对「滚过头了」的边界行为，后者针对「手势怎么解释」，解决的问题不同。
Q为什么设置了 contain 但页面还是会滚动？
Aoverscroll-behavior 只作用于「滚动链」：内层滚动到边界后尝试把滚动「交给」外层时，contain 会拦下这次传递。如果滚动事件根本来自滚动容器外部，或外层页面本身在随手指滚动（移动端），contain 不会生效。还要确认设置到了真正滚动的那个容器上。
Q什么是滚动链？怎么阻止滚动穿透？
A滚动链（scroll chaining）指内层元素滚动到边界后，滚动继续传递到父级或页面，导致「弹窗里的滚动带动了页面滚动」的穿透现象。在弹窗、侧边栏、抽屉的内容容器上设置 overscroll-behavior: contain 即可拦截，防止滚动传递到外部；none 还会额外禁用浏览器默认行为（如下拉刷新、回弹）。
Qoverscroll-behavior 和 overscroll-behavior-x/y 是什么关系？
Aoverscroll-behavior 是简写属性，可同时设置两个方向的边界行为；overscroll-behavior-x、overscroll-behavior-y 是控制水平、垂直方向的分属性。例如只需阻止垂直方向滚动链，写 overscroll-behavior-y: contain 即可。
🏷️ 相关属性
💡 相关案例
📚 相关教程
