overscroll-behavior 必须作用于实际滚动容器（如 .modal-content），而非 html/body；需满足 overflow-y:auto/scroll、显式高度、内容溢出三条件；嵌套滚动每层均需单独设置；transform 等属性会使其失效；iOS 16.4 前不支持，JS 降级需监听具体容器 touchmove 并传 {passive: false}。
overscroll-behavior 写在 body 或 html 上根本无效
iOS Safari（直到 iOS 16.4+）和多数旧版 WebKit 浏览器会硬编码忽略 html 和 body 元素上的 overscroll-behavior。你在 DevTools 里能看到它被标记为灰色禁用状态，computed 样式里压根不出现——不是写错了，是浏览器直接不读。
真正起效的位置必须是「实际发生滚动的容器」，比如：.modal-content、#list-container、.uni-scroll-view-content。它得同时满足三个条件：
-
overflow-y: auto或scroll（hidden不行） - 有显式高度（
height: 100vh、max-height: 500px，不能是min-height或靠内容撑开） - 内容真实溢出（否则浏览器不认为它是可滚动上下文）
嵌套滚动结构中漏掉任意一层都会穿透
比如弹窗里有个 .modal（position: fixed），里面包着 .modal__scroller，再里面是 .chat-list。如果只给 .modal__scroller 加了 overscroll-behavior: contain，但 .chat-list 本身也设置了 overflow-y: auto 且内容溢出，那它就是独立滚动上下文——没加属性，事件照样冒泡到外层甚至 body，橡皮筋就回来了。
解决办法很简单：每一层「自己能滚」的容器都得单独声明：
立即学习“前端免费学习笔记（深入）”；
规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
.modal__scroller { overscroll-behavior: contain; }.chat-list { overscroll-behavior: contain; }- uni-app 中还要穿透：
::deep(.uni-scroll-view-content) { overscroll-behavior: contain; }
某些 CSS 属性会绕过 overscroll-behavior 控制链
哪怕你把样式写对了、容器也满足滚动前提，以下布局属性仍会让 Safari 忽略 overscroll-behavior：
-
transform（哪怕只是transform: translateZ(0)） will-change: transform-
contain: paint或layout
这些都会创建新的层叠上下文或滚动坐标系，导致 overscroll-behavior 失去作用域。调试时可以临时注释掉这类声明，看橡皮筋是否消失——如果消失了，就得重构布局，别硬扛。
iOS 16.4 之前版本根本不支持，JS 降级也难兜底
查一下 navigator.userAgent，只要匹配 iOS 12–iOS 16.3，就可以直接放弃 overscroll-behavior。这些版本的 WebKit 完全不识别该属性，连 polyfill 都没意义。
这时候 JS 拦截是唯一选择，但要注意：
- 必须监听具体容器的
touchmove，而不是document或body - 必须传
{ passive: false }，否则e.preventDefault()在 iOS Safari 15+ 会被静默忽略 - 只在临界点拦截：
scrollTop === 0 && e.touches[0].clientY > el.getBoundingClientRect().top，否则会锁死正常滚动 - 千万别用
body { position: fixed }全局锁定——它会破坏focus、键盘唤起、SSR hydration 同步
最易被忽略的一点：即使你用了 JS 降级，Safari 的原生橡皮筋动画仍可能在 preventDefault() 前闪现一帧。这不是 bug，是系统级行为无法被完全覆盖。能做的只是让回弹后立刻归位，而不是指望它“不拉出来”。
