ios safari的overscroll-behavior: none仅对内部可滚动元素生效，对body/html根层无效；touch-action: none需作用于有高度、overflow且内容溢出的容器才有效。
iOS Safari 的 overscroll 橡皮筋效果无法通过 overscroll-behavior 完全禁用，touch-action: none 也仅在特定条件下生效——关键在于滚动容器是否“可滚动”且“非 body 根层”。
为什么 overscroll-behavior: none 在 iOS 上经常失效
iOS Safari 对 overscroll-behavior 的支持始于 iOS 16.4，但仅作用于**内部可滚动元素**（如 div 设置了 overflow: auto 且内容溢出），对 或 根滚动容器完全不生效。这意味着：即使你在 body 上写 overscroll-behavior: none，下拉仍会触发橡皮筋。
- 常见错误现象：
overscroll-behavior: none加在body或全屏div上，但滚动到底部时依然回弹 - 根本原因：Safari 将根层滚动视为系统级手势，CSS 行为被忽略
- 兼容性影响：iOS 15 及更早版本完全不识别该属性，需降级方案
如何让 touch-action: none 在 iOS 上真正起作用
touch-action: none 并非“禁止滚动”，而是**移除该区域的所有原生手势响应**——但它只在元素本身不参与滚动链时才有效。若元素本身不可滚动（比如没设 overflow 或内容未溢出），iOS 会直接忽略该声明。
- 必须同时满足两个条件：容器有明确的
height+overflow: auto（或scroll），且内容实际溢出 - 不能写在
body或html上（无效），应作用于具体滚动区域，例如.modal-content或#list-container - 若容器内含
input、textarea等可聚焦元素，需额外加touch-action: manipulation回退，否则输入框无法唤起键盘 - 示例有效写法：
.scroll-area { height: 300px; overflow-y: auto; touch-action: none; }
跨端统一禁用橡皮筋的最小可行组合
单一 CSS 属性无法覆盖所有场景，需分层控制：
- 对 iOS 内部滚动容器（如抽屉、弹窗列表）：用
overscroll-behavior: none（iOS 16.4+） +touch-action: none（兜底） - 对 iOS 根滚动（整个页面）：JavaScript 拦截
touchmove事件 +preventDefault()，但仅限非输入状态；同时设置body { overscroll-behavior: none }作为未来兼容占位 - Android 和桌面端：
overscroll-behavior: none基本全覆盖，无需 JS 干预 - 注意：在
touchstart中动态判断scrollTop === 0 && e.touches[0].clientY > 0才阻止，避免误杀上滑操作
真正容易被忽略的是：iOS 上「滚动容器是否被识别为独立滚动上下文」取决于渲染层是否创建了独立的滚动坐标系——这受 transform、will-change、contain 等属性间接影响。有时候加一行 contain: strict 比多写三行 JS 更可靠。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
