overscroll-behavior 控制滚动到边界后的行为而非是否可滚动，必须写在真实可滚动的容器上（如 .modal__content），且需满足高度约束、overflow-y: auto 及内容溢出；contain 允许本地弹性回弹，none 则完全禁用。
overscroll-behavior 不是控制“能不能滚动”，而是控制“滚到头之后怎么办”。它只在滚动容器真正触达边界（顶部/底部）时生效，且必须写在浏览器认定的滚动容器上——否则等于没写。
为什么 overscroll-behavior 写在 .modal 上完全无效
因为 .modal 通常是 position: fixed 容器，本身没有 overflow、没有溢出内容、不可滚动，浏览器根本不把它当作滚动链中的一环，属性直接被静默忽略。
- 必须设在真实可滚动的子元素上，比如
.modal__content、.chat-list或.sidebar-menu - 该子元素需同时满足：有明确高度约束（如
max-height: 80vh）、overflow-y: auto（或scroll）、内容真实溢出（否则无滚动条，不触发边界行为） - 祖先元素不能含
transform、will-change或backface-visibility—— Safari 15–16 会因此断开滚动链识别
contain 和 none 的关键区别不是“阻断力度”，而是“本地反馈”
二者都阻断向上传播，但对用户操作的视觉/触觉反馈完全不同：
-
overscroll-behavior: contain：允许当前容器自身弹性回弹（iOS 橡皮筋、Android glow），仅阻止事件冒泡 → 弹窗内列表手感自然，键盘唤起后自动滚动也不受影响 -
overscroll-behavior: none：连本地回弹也禁掉，滚到顶/底就硬停 → 只适合地图画布、全屏遮罩等需彻底隔离的场景，日常弹层慎用 -
overscroll-behavior-y: contain; overscroll-behavior-x: auto：横向轮播 + 纵向防穿透的典型组合
为什么加了却像没加？滚动链根本没成立
这个属性不报错、不警告，写错就等于没写。常见失效原因全是底层滚动链断裂：
- 内容高度不足，没溢出 → 滚动条都没出现，
overscroll-behavior不介入 - 父级用了 Flex/Grid 布局但没设
min-height: 0或overflow: hidden→ 高度计算异常，滚动行为失控 - 写了
body { overscroll-behavior: contain }→ iOS Safari 和多数浏览器会忽略根元素上的该属性，computed 样式里常显示为灰色禁用 - 毛玻璃遮罩场景下，遮罩层（如
.overlay）才是滚动容器，属性得加在它身上，不是加在内部的.glass-pane
iOS 15 及更早版本必须 JS 补位，但别乱 preventDefault()
iOS 16.4+ 才原生稳定支持，旧版必须兜底，但全局拦截手势极易破坏体验：
- 先检测支持：
CSS.supports('overscroll-behavior', 'contain') - 只对非目标区域拦截：
e.target.closest('.scrollable')判断是否命中允许滚动的元素（如.list、.modal__content） - 避免在模态框层级使用
transform: translateZ(0)类 hack —— 它会创建新层叠上下文，干扰滚动链识别
真正容易被忽略的一点是：overscroll-behavior 不控制“能不能滚动”，只干预“滚到头之后怎么办”。如果内容没溢出、容器没设 overflow、或者滚动链被 transform 断开，再怎么写 none 都只是摆设。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
