overscroll-behavior写在.modal上无效，因其仅为position:fixed容器、无overflow不可滚动；必须设在有max-height和overflow-y:auto的真实可滚动子元素（如.modal__content）上，且父级不能含transform等干扰样式，contain比none更推荐——允许本地回弹但阻断事件上传。
为什么 overscroll-behavior 写在 .modal 上没用
因为 .modal 通常是 position: fixed 的容器，它本身不可滚动——浏览器根本不会把它识别为滚动容器，overscroll-behavior 属性直接被静默忽略。真正需要设样式的，是它内部那个「实际在滚动」的元素。
- 必须设在有
overflow-y: auto（或scroll）且内容真实溢出的子元素上，比如.modal__content、.chat-list或.sidebar-menu - 该子元素还得有明确高度约束，如
max-height: 80vh或height: 400px；没高度，就没滚动条，属性不触发 - 父级不能含
transform、will-change或backface-visibility—— 这些会破坏 Safari 15–16 的滚动链识别
contain 和 none 到底该选哪个
overscroll-behavior: contain 是嵌套滚动场景的默认推荐值；none 更激进，副作用明显，不是“更严格”，而是“更粗暴”。
-
contain：允许当前容器自身弹性回弹（iOS 橡皮筋、Android glow），仅阻断事件向上传播 → 弹窗内列表手感自然，键盘唤起后自动滚动也不受影响 -
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+ 才原生支持，旧版必须兜底，但全局 preventDefault() 会锁死所有内部滚动，体验反而更差。
- 先检测支持：
CSS.supports('overscroll-behavior', 'contain') - 只对非目标区域拦截：
e.target.closest('.scrollable')判断是否命中允许滚动的元素（如.list、.modal__content） - 绑定
touchmove必须传{ passive: false }，否则preventDefault()在 iOS Safari 15+ 被静默忽略 - 手动保存并恢复
window.scrollY，否则页面会突然跳动——这一步漏掉，体验比不加还差
overscroll-behavior: contain，而是确认哪个元素在滚动、它是否真的可滚动、以及是否还有其他祖先参与了 scroll chain——这些都得靠 getComputedStyle 和滚动事件调试器逐层验证。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
