overscroll-behavior 用于阻断滚动事件向上传播，而非阻止容器自身滚动；必须作用于真实可滚动的子元素（如 .modal__content），且需满足高度限制、overflow-y: auto 及内容溢出等条件，写在非滚动容器（如 position: fixed 的 .modal）上无效。
overscroll-behavior 不是阻止“外层盒模型滚动”，而是阻断滚动事件从当前容器向上传播到祖先滚动容器。它只在你真正滚动到该元素边界（顶/底）时起作用，且必须写在浏览器认定的「滚动容器」上——写错位置、高度不足、布局干扰，都会让它静默失效。
为什么 overscroll-behavior 写在 .modal 上完全没反应
因为 .modal 通常是 position: fixed 容器，本身没有 overflow、内容不溢出、不可滚动，浏览器压根不把它当作滚动链中的一环，属性直接被忽略。
- 必须设在真实可滚动的子元素上，例如
.modal__content、.chat-list或.sidebar-menu - 该子元素需同时满足：
max-height: 80vh（或明确高度）、overflow-y: auto、内容真实溢出（否则无滚动条，不触发边界行为） - 祖先元素不能含
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 兼容性兜底必须做，但别乱 preventDefault()
iOS 16.4+ 才原生稳定支持，旧版（尤其是 15.x）仍常失效。不能只靠 CSS：
- 先检测支持：
CSS.supports('overscroll-behavior', 'contain') - 若不支持，传统降级方案更可靠：弹窗打开时临时加
body { position: fixed; top: -${window.scrollY}px; }，关闭时还原 - 避免全局拦截
touchmove并调用preventDefault()—— 它极易破坏惯性滚动、锁死内部正常滚动，体验反而更差 - 真正容易被忽略的一点是：
overscroll-behavior不控制“能不能滚动”，只干预“滚到头之后怎么办”。如果内容没溢出、容器没设overflow、或者滚动链被transform断开，再怎么写none都只是摆设
