因为ios safari等浏览器忽略html/body上的overscroll-behavior，该属性仅对设置了overflow且内容真实溢出的非根元素（如.modal__content）生效；contain允许子容器局部回弹并阻止事件冒泡，none则彻底禁用所有overscroll反馈。
为什么 overscroll-behavior 写在 body 上没用
因为 iOS Safari 和多数现代浏览器会忽略作用于 html 或 body 的 overscroll-behavior，哪怕你写了 body { overscroll-behavior-y: contain; }，computed 样式里也常显示为灰色禁用状态。根本原因是：根元素的 overscroll 行为由 WebView 层直接控制，CSS 无法干预。真正生效的必须是「实际发生滚动的容器」——比如一个 .modal__content、#chat-list 或带 overflow-y: auto 的列表包裹层。
contain 和 none 在下拉刷新场景中怎么选
overscroll-behavior-y: contain 是大多数嵌套滚动场景的默认推荐值；它允许子容器（如弹窗内列表）触顶/底时保留轻微弹性回弹，但阻止事件向父级传播。而 overscroll-behavior-y: none 更激进：彻底禁用当前容器的所有 overscroll 反馈，包括 iOS 下拉刷新提示、弹性动画等，容易让用户困惑，只适合全屏遮罩类强隔离场景。
- 要保留下拉刷新能力？主滚动容器保持
overscroll-behavior-y: auto（默认），靠 JS 判断是否在顶部再触发逻辑 - 要禁止页面级下拉刷新（比如 Chrome 导航栏刷新）？在内容容器（如
.content）上设overscroll-behavior-y: contain - 要完全屏蔽所有 overscroll 视觉反馈？才用
none，但需确认第三方组件（如下拉刷新库）不依赖该行为
哪些地方必须加，哪些地方加了也白加
必须加在实际可滚动的子容器上，且同时满足三个条件：有明确高度（如 max-height: 80vh）、overflow-y: auto（或 scroll）、内容真实超出该高度。常见白加位置：
-
.modal（position: fixed容器）——它本身不可滚动，属性被忽略 -
body且已设overflow: hidden——此时body不再是滚动容器，overscroll-behavior失效 - 嵌套结构中只在最外层设了
contain，但内层列表（如.chat-list）没显式声明——滚动穿透仍会发生
老 iOS（iOS 15 及以下）怎么兜底
iOS 16.4+ 才原生支持 overscroll-behavior，旧版必须 JS 补位，但不能全局 preventDefault()，否则锁死所有内部滚动。
- 先检测支持：
CSS.supports('overscroll-behavior', 'contain') - 降级时只拦截非目标区域：
touchmove中用e.target.closest('.scrollable')判断是否命中允许滚动的元素（如.list、.modal-scroll） - 必须传
{ passive: false }，否则preventDefault()在 iOS Safari 15+ 和 Chrome 中被静默忽略 - 配合
body { position: fixed; top: -${window.scrollY}px; }防止页面跳动，且记得在恢复时重置scrollTop
getComputedStyle 和真机调试反复验证。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
