最推荐使用 overscroll-behavior: none 写在具体滚动容器（如 .scroll-container）上，可精准禁用橡皮筋且不干扰内部滚动；ios 13+ 原生支持，兼容性好；避免在 body 上用 overflow: hidden 或 touchmove 全局拦截，否则易导致手势失效或布局异常。
iOS Safari 滚动到顶部/底部时触发橡皮筋效果，怎么禁用
不能全局禁用，但可以通过 overscroll-behavior 精准控制。这个 CSS 属性是目前最干净、无副作用的解法，兼容 iOS 13+ 和所有现代浏览器。
常见错误是试图用 touchmove 阻止默认行为，结果导致内部滚动失效或手势卡顿；或者滥用 position: fixed 做遮罩，反而引发布局抖动。
-
overscroll-behavior: none写在滚动容器上（如.scroll-container），可同时阻止滚动传递和橡皮筋反馈 - 若只希望禁止向上拉出橡皮筋（顶部回弹），保留向下滚动到底部的弹性，用
overscroll-behavior-y: contain - iOS 12 及更早版本不支持该属性，需降级：对
body设置touch-action: pan-y+ 监听touchmove并检查scrollTop === 0 && e.touches[0].clientY > 0才调用e.preventDefault()
为什么给 body 加 overflow: hidden 不起作用
因为 iOS Safari 的橡皮筋效果发生在 WebView 层，不经过 CSS 渲染管线。即使 body 被锁死，系统仍会响应原生手势并触发回弹动画。
更糟的是，overflow: hidden 在 iOS 上可能被忽略，尤其当页面有 meta viewport 缩放或动态 height 计算时，还会导致键盘弹出后页面错位。
- 真正生效的是
overscroll-behavior或原生 WebKit API（如webkit-overflow-scrolling: touch已废弃） - 若必须操作
body，优先用document.body.style.position = 'fixed'+top: -${window.scrollY}px回滚，但要记得恢复 scrollY 和 focus 状态 - 避免在 Vue/React 组件挂载时直接改
body样式，容易与 SSR 或 hydrate 同步冲突
使用 touchmove 阻止默认行为时，为什么内部滚动也卡住了
因为 e.preventDefault() 会一并取消整个 touch 流程，包括子元素的滚动事件捕获机会。这不是 bug，而是浏览器为保证手势一致性做的设计。
正确做法是只在「确实需要拦截」的位置阻止，而不是在 document 或 body 上统一监听。
- 监听目标容器的
touchmove，用event.target.closest('.no-bounce')判断是否命中受控区域 - 检查是否处于临界位置：
el.scrollTop === 0 && e.touches[0].clientY > el.getBoundingClientRect().top - 不要在
passive: false的监听器里漏写{ passive: false }，否则 iOS 会静默忽略preventDefault
第三方库（如 iScroll、better-scroll）为何仍出现橡皮筋
多数库默认不接管原生滚动，而是模拟滚动逻辑。如果容器本身仍可原生滚动（比如没设 overflow: hidden 或父级透出 overflow），系统就会叠加触发橡皮筋。
根本原因在于这些库通常只处理 touchstart/move/end，但无法干预 WebView 层的 overscroll 行为。
- 启用库的
preventDefaultException（iScroll）或probeType（better-scroll）仅影响事件分发，不关闭橡皮筋 - 必须配合 CSS：
.wrapper { overscroll-behavior: none; }，且 wrapper 不能是body或html - React/Vue 中若用 ref 绑定滚动容器，请确保 ref 元素真实存在且已挂载，否则
overscroll-behavior不生效
html 或 body 还有剩余高度或未显式设置 overscroll-behavior，iOS 就会 fallback 到它身上。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
