overscroll-behavior-y: contain 生效的前提是元素必须实际纵向滚动，即需同时满足：有高度限制、overflow-y 为 auto/scroll、内容溢出；否则该属性不触发。
为什么 overscroll-behavior-y: contain 加了却没用
根本原因不是属性写错，而是它根本没被触发——overscroll-behavior-y 只在「内容实际溢出 + 容器可纵向滚动」时才介入。常见失效场景包括：
-
overflow-y没设，或设成了visible（默认值），浏览器直接忽略该属性 - 容器高度由 flex / grid 自动撑开，没加
min-height: 0或overflow: hidden，导致滚动计算失败 - 父级用了
transform、will-change或backface-visibility，iOS Safari 15–16 会断掉滚动链识别 - 写在
body或.modal（仅position: fixed的壳子）上，但真正滚动的是内部的.modal__content
必须作用于哪个元素才生效
只能加在「实际发生纵向滚动的内容区」上，且该元素需同时满足：
- 有明确高度限制（如
max-height: 300px或height: 100vh） - 设置了
overflow-y: auto或scroll（不能是overflow: hidden） - 内容高度 > 元素自身高度（否则无滚动条，属性不触发）
错误写法：.modal { position: fixed; overscroll-behavior-y: contain; } → .modal 不滚动，属性白写
正确写法：.modal__content { max-height: 80vh; overflow-y: auto; overscroll-behavior-y: contain; }
立即学习“前端免费学习笔记（深入）”；
contain 和 none 在 y 轴上的关键区别
overscroll-behavior-y: contain 不等于“禁掉所有回弹”，它只做一件事：阻止滚动事件向上传播，但保留本地反馈。具体表现：
- 用户滑到列表底部时，仍能看到 iOS 的轻微拉伸-回弹（橡皮筋），松手后自然缩回
- 背景页完全不动，不会跟着往上滚
- 键盘唤起时，输入框仍能被自动滚动定位（
none会破坏这个） - 兼容性更好：iOS 13+ 就支持，比
none（需 iOS 16.4+）更稳妥
旧版 iOS Safari 的兜底方案
iOS 15.x 及更早版本对 overscroll-behavior-y 支持不稳定，即使写对也常穿透。必须配合 JS 降级：
- 弹窗打开时，给
document.body加{ passive: false }的touchmove监听，并在非允许滚动区域调用e.preventDefault() - 用
e.target.closest('.scrollable')白名单判断是否允许滚动（如.chat-list、.modal__content） - 同时设置
body { position: fixed; top: -${window.scrollY}px; }防止页面跳动 - 关闭弹窗后，记得还原
body样式并重置window.scrollTo(0, scrollY)
最容易被忽略的一点：overscroll-behavior-y 管的只是“滚到头之后怎么办”，它不管“能不能滚”——如果容器压根没滚动条，再怎么写 contain 都只是 CSS 注释。
