overscroll-behavior必须作用于实际可滚动的非根容器（如.modal-content），不能写在body/html上；需同时满足overflow-y:auto、明确高度及内容真实溢出，否则无效。
overscroll-behavior 必须作用于具体滚动容器，不能写在 body 上
直接给 body 或 html 加 overscroll-behavior: none 在 iOS Safari 中完全无效——浏览器会忽略该声明，computed 样式里显示为灰色禁用状态。这是因为 WebKit 对根元素的 overscroll 行为有底层锁定，CSS 无权干预。
真正起效的位置是「实际发生滚动的容器」，比如一个 .modal-content、#list-container 或 .scroll-view__content。它必须同时满足：已设置 overflow-y: auto（或 scroll）、有明确高度（如 height: 100vh）、内容真实溢出（否则浏览器不认为它可滚动）。
- 常见错误：用
position: fixed遮罩弹窗，但只给遮罩层设样式，忘了内部的长列表才是滚动主体 - uni-app 中需穿透到
::deep(.uni-scroll-view-content)；微信小程序同理，要作用于scroll-view内部渲染节点 - 嵌套滚动结构（如 modal > list > item）中，每一层独立可滚动的容器都得单独加
overscroll-behavior
用 contain 还是 none？下拉刷新场景优先选 contain
禁用下拉刷新时，overscroll-behavior-y: contain 比 none 更稳妥。它不会彻底禁掉本层回弹（比如弹窗内列表拉到底仍有轻微弹性），但能阻止事件向上冒泡——这意味着你既避免了背景页被拖拽回弹，又没破坏键盘唤起时输入框自动滚动定位的能力。
none 虽然更激进（禁本层 + 禁传播），但它可能让某些依赖滚动链的组件失效，比如下拉刷新库靠 scroll 事件判断触发位置，或 input 获焦后浏览器自动滚动行为被一并拦截。
- 横向轮播图只需约束 X 轴：用
overscroll-behavior-x: contain; overscroll-behavior-y: auto - 若页面本身不希望任何回弹（如游戏画布），才考虑
none，且必须确认无第三方滚动依赖 - 不要混用
overscroll-behavior和touch-action: none——后者会直接废掉所有触摸滚动
为什么加了属性还是触发橡皮筋？先检查三件事
即使样式写对了，也可能因底层渲染条件未满足而失效。Safari 是否把某个元素识别为有效滚动上下文，取决于它是否创建了独立的滚动坐标系，这不光看 CSS，还受布局属性影响。
规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
- 容器用了
transform（如translateZ(0)）、will-change或contain: paint：这些会隔离渲染层，绕过overscroll-behavior - 父级用了
position: fixed但子容器没设显式高度：Safari 可能不触发滚动链控制逻辑 - 内容没撑满容器高度：比如
overflow-y: auto但子元素总高容器高，浏览器判定“无需滚动”，属性自然不激活
验证方式：在 Safari 开发者工具中选中该元素 → 查看 Computed 样式 → 确认 overscroll-behavior 是已应用状态，而非 “not supported” 或灰色禁用。
iOS 16.4 以下版本只能降级处理，没有完美 CSS 方案
所有 iOS 16.4 之前的版本（包括大量仍在使用的 iPhone 12/13）完全不支持 overscroll-behavior。这时候 CSS 层面无解，JS 拦截也容易翻车：全局监听 touchmove 并 preventDefault() 会直接锁死所有滚动惯性，且必须传 { passive: false }，否则在 iOS 15+ 上静默失效。
可行的妥协路径只有两条：
- 对老 iOS，放弃“彻底禁用”，改为提升容错：下拉刷新逻辑不依赖精确拉到顶，而是结合阈值检测（如
scrollTop ）或按钮触发 - 在局部容器上用
scrollend事件配合scrollTop判断，手动重置位置（例如弹窗关闭后el.scrollTop = 0），但会打断自然动效，用户感知明显
最常被忽略的一点：很多页面的橡皮筋根本不是子容器引起的，而是 body 自己成了滚动体——检查是否内容高度不足一屏，导致 body 承担了实际滚动职责。修容器前，先 fix 布局高度。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
