overscroll-behavior: none 在 上常失效，因 ios safari 橡皮筋行为发生在原生层，需同时满足 height: 100%、overflow: hidden 且无动态高度计算；应作用于实际滚动容器（如 .chat-list），或用 js 动态设置 document.documentelement.style.overscrollbehavior = 'none'。
直接在 overscroll-behavior: none 为什么常失效
因为 iOS Safari 的橡皮筋行为发生在 WebView 原生层，overscroll-behavior 在 或 上生效有严格前提：必须同时满足 height: 100%、overflow: hidden，且页面不能存在动态 height 计算（比如 JS 修改 document.body.style.height 后未重排）。更常见的是， 默认没有显式高度，导致该声明被浏览器忽略。
实际建议：
- 不要写 html { overscroll-behavior: none; }
- 改为给具体滚动容器加，例如 .main-scroll 或 #app
- 若真需全局控制，优先用 document.documentElement.style.overscrollBehavior = 'none' 动态设置，并确保 DOM 已就绪且样式已计算
overscroll-behavior 写在哪？写几个值才真正起作用
必须写在「实际触发滚动的元素」上，不是父容器，也不是 。比如你用 max-height: 60vh; overflow-y: auto 包裹聊天列表，那就要写在那个 <div class="chat-list"> 上：<pre class="brush:php;toolbar:false;">.chat-list {
max-height: 60vh;
overflow-y: auto;
overscroll-behavior-y: contain; /* 阻断传递，但保留自身回弹 */
}
</pre>
<p>注意：<br>
- 单写 <code>overscroll-behavior: none 会同时禁掉 x 和 y 轴
- 只想禁顶部拉出（向上回弹），保留底部刷新（向下回弹）？用 overscroll-behavior-y: contain
- contain 比 none 更安全：它阻止滚动链传播，但不干扰下拉刷新或内部滚动惯性
- iOS 13+ 原生支持，无需 polyfill；iOS 12 及更早需降级处理
为什么监听 touchmove 并 e.preventDefault() 后，内部滚动也卡了
因为 e.preventDefault() 会取消整个 touch 流程，子元素再无机会捕获滚动事件——这不是 bug，是 WebKit 为保障手势一致性做的限制。
正确做法是：
- 不监听 document 或 body，只监听目标容器本身
- 用 event.target.closest('.no-bounce') 判断是否命中受控区域
- 检查临界状态：比如 el.scrollTop === 0 && e.touches[0].clientY > el.getBoundingClientRect().top
- 必须传 { passive: false }，否则 iOS 会静默忽略 preventDefault()
- 加位移阈值（如 Math.abs(deltaY) > 5），避免轻微抖动误触发
iOS 12 及更早版本的兜底方案怎么写才不翻车
旧版不支持 overscroll-behavior，但也不能粗暴地全局 touchmove + preventDefault —— 它会让所有滚动失效，包括 <select></select> 展开、input 聚焦、甚至页面缩放。
最小侵入式兜底：
- 只对明确需要禁用的容器做判断，例如固定表头表格的 .table-body
- 结合 touch-action: pan-y（禁用横向拖拽）或 pan-x（禁用纵向）
- 使用 scrollTop + scrollHeight + clientHeight 精确判断是否处于边界
- 避免在 Vue/React 组件 mounted 里直接改 body 样式，容易与 SSR hydrate 冲突
- 更稳妥的是：检测到 iOS 12，加载轻量级 inobounce.js（注意它已多年未维护，仅用于兜底）
关键点在于：橡皮筋不是 bug，是系统交互反馈。禁用它的目的不是“消灭弹性”，而是把控制权交还给开发者——该在哪停、该向哪传、该由谁响应，得由滚动容器自己说了算。跨容器滚动链、下拉刷新兼容、输入框聚焦异常……这些才是真实项目里最常漏掉的细节。
