overscroll-behavior仅控制滚动到底后事件是否冒泡至父级，不能禁用iOS橡皮筋或下拉刷新；须作用于显式可滚动的非根容器（overflow-y:auto+明确高度+内容溢出），根元素上无效。
overscroll-behavior 不能防止 iOS 原生橡皮筋回弹，也不能禁用下拉刷新本身；它只控制「滚动到底后是否把事件传给父级」。想靠它“阻止下拉拖拽异常”，必须作用在对的元素上、满足滚动上下文条件，否则写了也白写。
为什么写在 body 或 html 上完全没反应
因为 iOS Safari（直到 iOS 16.4+）和多数 Android WebView 硬编码忽略根元素上的 overscroll-behavior。你在开发者工具里看到该属性灰掉、computed 值是 auto，不是你写错了，是浏览器压根不读它。真正的滚动链控制权只交给「显式可滚动的非根容器」。
- 必须是一个设置了
overflow-y: auto（或scroll）的元素 - 必须有明确高度约束，比如
max-height: 80vh、height: 400px，不能只靠min-height或内容撑开 - 内容必须真实溢出——子元素总高度 > 容器高度，否则浏览器不认为它是滚动上下文
overscroll-behavior-y: contain 和 none 的实际区别
多数场景下，contain 是更安全的选择；none 是激进方案，容易误伤。
-
contain：允许当前容器自身保留轻微弹性（比如弹窗内列表拉到底仍有 iOS 回弹），但阻止事件向上冒泡 → 背景页不会抖，键盘唤起时 input 自动滚动也不受影响 -
none：既禁本层所有 overscroll 反馈（无回弹、无下拉提示），也禁传播 → 可能让依赖 scroll 事件的下拉刷新库失效，或破坏浏览器原生 focus 滚动行为 - 横向轮播只需约束 X 轴：
overscroll-behavior-x: contain; overscroll-behavior-y: auto
加了属性还是拖拽穿透？先查这三件事
即使 CSS 写对了，也可能因底层渲染条件缺失而静默失效。
- 容器或任意祖先用了
transform、will-change: transform或contain: paint→ 渲染层被隔离，滚动链断裂，overscroll-behavior失效 - 父级是
position: fixed，但子滚动区没设显式高度 → Safari 可能跳过滚动链识别逻辑 - 嵌套结构中只在外层设了
contain，但内层列表（如.chat-list）没单独声明 → 滚动事件仍会穿透到最外层
iOS 15 及更早版本必须 JS 补位
CSS 方案在旧版 WebView 中根本不存在。这时候只能降级监听 touchmove，但绝不能全局拦截。
- 先检测支持：
CSS.supports('overscroll-behavior', 'contain') - 只对特定类生效，例如：
e.target.closest('.scrollable') - 仅当
scrollTop === 0 && e.touches[0].clientY > 0（顶部触顶上拉）时调e.preventDefault() - 务必传
{ passive: false }，否则 iOS Safari 会忽略preventDefault
最容易被忽略的是：这个属性只在「滚动到达边界那一瞬间」起作用。它不控制滚动是否发生，也不影响惯性或动能——如果容器根本不可滚动，或者高度塌缩了（比如用 100vh 在地址栏收起时），那它连触发机会都没有。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
