overscroll-behavior 只对真实可滚动的非根容器生效，需同时满足显式 overflow-y、明确高度约束及内容超限三条件；根元素（body/html）上声明无效，因其 overscroll 由 webview 底层控制。
overscroll-behavior 写在 body 或 html 上完全无效，这是绝大多数人踩坑的起点。它只对「真实可滚动的非根容器」起作用，且必须同时满足高度、溢出、内容超限三条件。
为什么 overscroll-behavior-y: contain 写在 body 上没反应
iOS Safari 和 Chrome 都会忽略 body 或 html 元素上的 overscroll-behavior 声明——你在开发者工具里看到该属性灰掉、computed 样式不生效，不是 CSS 写错了，是浏览器根本没读它。根元素的 overscroll 行为由 WebView 底层控制，CSS 无权干预。
- 真正生效的位置必须是实际发生滚动的容器，比如
.modal__content、#chat-list、.article-body - 该容器必须显式设置
overflow-y: auto（或scroll） - 必须有明确高度约束：如
max-height: 70vh、height: 400px，不能靠min-height或内容撑开 - 内容必须真实超出该高度，否则浏览器不认为它是“可滚动上下文”
contain 和 none 在下拉刷新场景中怎么选
多数情况下，overscroll-behavior-y: contain 是更安全的选择；none 会彻底禁用本层所有 overscroll 反馈，包括 iOS 下拉提示、弹性回弹，容易破坏用户预期。
-
contain允许子容器触顶/底时保留轻微弹性（如弹窗内列表拉到底仍有回弹），但阻止事件向上冒泡 → 不影响键盘唤起时自动滚动，也不触发背景页下拉刷新 -
none会禁掉本层回弹 + 禁止传播，适合全屏遮罩类强隔离场景（如游戏画布、AR 视图），但可能让依赖 scroll 事件的下拉刷新库失效 - 横向轮播图只需约束 X 轴：
overscroll-behavior-x: contain; overscroll-behavior-y: auto
加了属性还是触发橡皮筋？先检查三件事
即使样式写对了，也可能因渲染层干扰或布局条件缺失而失效。Safari 是否识别为滚动上下文，取决于它是否创建了独立坐标系，这不光看 CSS，还受布局属性影响。
- 容器或任意祖先用了
transform（如translateZ(0)）、will-change: transform或contain: paint→ 渲染层被隔离，overscroll-behavior失效 - 父级是
position: fixed，但子滚动容器没设显式高度 → Safari 可能跳过滚动链控制逻辑 - 嵌套结构中只在外层设了
contain，但内层列表（如.chat-list）没显式声明 → 滚动穿透仍会发生
iOS 15 及以下必须 JS 补位，但不能全局 preventDefault()
CSS.supports('overscroll-behavior', 'contain') 是必做的检测。旧版 iOS 不支持该属性，降级方案必须精准拦截，否则会锁死所有内部滚动。
- 只在非目标区域拦截：
e.target.closest('.scrollable')判断是否命中允许滚动的元素（如.list、.modal-scroll） -
touchmove监听必须传{ passive: false }，否则preventDefault()在 iOS Safari 15+ 和 Chrome 中被静默忽略 - 不要给
body加overflow: hidden来“解决”穿透——会丢失滚动位置、触发重排、iOS 卡顿
最常被忽略的一点：overscroll-behavior 不是开关，而是滚动链的“闸门”。它只在滚动容器真正进入可滚动状态后才起效，而这个状态取决于渲染层是否建立、高度是否固定、内容是否溢出——缺一不可。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
