ios safari不支持在body或html上设置overscroll-behavior，仅对设置了overflow:auto/scroll且内容溢出的独立滚动容器生效；需同时满足高度限制、溢出声明及真实溢出，且避免transform等隔离渲染层的属性。
overscroll-behavior 写在 body 或 html 上为什么没用
因为 iOS Safari（直到最新版）根本**不解析** overscroll-behavior 在 body 或 html 元素上的声明。它只对「有明确滚动上下文」的容器生效——也就是设置了 overflow: auto / scroll 且内容实际溢出的块级元素。
常见错误现象包括：在 body { overscroll-behavior: none } 后仍能下拉出白边；或给全屏 div#app 加了该属性，但容器本身没设高度和 overflow，结果照样回弹。
- 必须确保目标元素是独立滚动容器（非根层），例如
.modal-content、#list-container、.chat-history - 该元素需同时满足：
height（或max-height） +overflow-y: auto（或scroll） + 内容真实溢出 - 不要依赖
overflow: hidden来“禁用滚动”，它和overscroll-behavior完全无关，也压不住橡皮筋
如何确认一个容器是否被 Safari 当作有效滚动上下文
iOS Safari 是否把某个元素识别为可拦截 overscroll 的对象，取决于它是否创建了**独立的滚动坐标系**——这不光看 CSS，还受渲染层影响。
容易被忽略的失效条件：
- 父容器用了
transform（如translateZ(0)）、will-change或contain: paint，可能意外隔离滚动上下文，导致子容器的overscroll-behavior失效 - 容器内嵌了
input或textarea，但没处理touch-action回退，iOS 会降级为默认手势行为 - 使用了
position: fixed或absolute布局但未显式设高，Safari 可能不触发滚动链控制逻辑
验证方法：在 Safari 开发者工具中选中该元素 → 查看 Computed 样式 → 检查 overscroll-behavior 是否显示为已应用（而非 not supported 或灰色置灰）。
正确写法与参数差异：none vs contain vs auto
overscroll-behavior 不是“开关”，而是滚动链策略声明。不同值的行为差异直接影响橡皮筋是否出现、是否透传、是否触发下拉刷新。
-
none：彻底阻断本层 overscroll 反馈 + 阻止滚动传递到外层（最常用，禁橡皮筋首选） -
contain：允许本层橡皮筋（比如弹窗滚动到底部还能微动），但阻止传递到外层（适合需要局部弹性但不想影响背景页的场景） -
auto：默认行为，等价于不写；iOS 下就是原生橡皮筋 + 滚动穿透 - 可拆分写：
overscroll-behavior-y: none禁 Y 轴回弹，overscroll-behavior-x: contain保留 X 轴滑动惯性
示例有效声明：
.scroll-area {
height: 400px;
overflow-y: auto;
overscroll-behavior: none;
}
兼容 iOS 16.4 之前版本的兜底方案
iOS 15 及更早版本完全不支持 overscroll-behavior，此时仅靠 CSS 无解。JS 拦截必须满足两个硬性前提，否则会卡顿或失焦：
- 监听目标容器（不是
document）的touchmove，且绑定时必须带{ passive: false } - 只在临界位置调用
e.preventDefault()：即el.scrollTop === 0 && e.touches[0].clientY > el.getBoundingClientRect().top（顶部）或el.scrollHeight - el.scrollTop （底部） - 容器内含可编辑元素时，需额外加
touch-action: manipulation到 input/textarea，否则键盘无法唤起
真正容易被忽略的是：iOS 对「滚动坐标系」的判定非常敏感——哪怕只是加了个 backface-visibility: hidden，都可能让原本生效的 overscroll-behavior 突然失效。调试时优先检查渲染层是否被意外隔离。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
