Safari ≤ 16.4 完全不支持 overscroll-behavior，该属性被引擎忽略；16.4+ 仅对满足显式高度、overflow-y: auto 且内容溢出的非根滚动容器生效，contain 允许本层弹性回弹，none 才禁用橡皮筋。
overscroll-behavior 在 Safari ≤ 16.4 中根本不存在
Safari 直到 iOS 16.4 / macOS Ventura 13.3 才首次原生支持 overscroll-behavior。在此之前（包括整个 iOS 15.x、iOS 14、iOS 13 等主流旧版本），该 CSS 属性被完全忽略——无论你写在哪个元素上，computed 样式里都显示为灰色禁用状态，DevTools 里也查不到生效痕迹。
这不是“不兼容”或“部分支持”，而是浏览器引擎压根没实现这个规范。WebKit 的滚动链（scroll chaining）控制逻辑在 16.4 之前是硬编码锁定的，CSS 层面无权干预。
即使写对了位置，Safari 仍可能跳过渲染层识别
即便在 iOS 16.4+，overscroll-behavior 要真正起效，还依赖 Safari 是否把目标元素识别为「独立滚动上下文」。它不只看 CSS，还会检查布局属性：
- 容器或任意祖先用了
transform、will-change: transform或contain: paint→ 创建新层叠上下文，绕过滚动链控制 - 父级是
position: fixed，但子容器没设显式height（比如只用min-height或靠内容撑开）→ Safari 不认为它构成有效滚动坐标系 - 嵌套滚动结构中漏掉某一层（如 modal > .list > .item），哪怕只有一层没加
overscroll-behavior: contain，事件就会穿透上去触发根页面回弹
body 和 html 上写 overscroll-behavior 就是白写
在 Safari 中，body 和 html 是特殊根元素，其 overscroll 行为由 WebView 原生层接管，CSS 层无法覆盖。你写 body { overscroll-behavior: none; }，DevTools 会直接标灰，且不会影响任何实际表现。
真正起作用的位置必须是「实际发生滚动的容器」，例如：
-
.app-container（SPA 主内容区） -
.modal-content（弹窗内滚动区） -
.chat-list（固定高度 +overflow-y: auto的列表）
而且该容器必须同时满足：overflow-y: auto（或 scroll）、显式高度（如 height: 100vh）、内容真实溢出——三者缺一不可。
contain 和 none 在 Safari 中行为差异明显
很多人以为 overscroll-behavior-y: contain 和 none 都能禁橡皮筋，但在 Safari 中：
-
contain只阻断滚动链传播（防止穿透到父级），但**保留本层弹性回弹**——也就是 iOS 上仍会拉出一点白边，松手后回弹 -
none才真正禁掉本层的橡皮筋反馈，但仅在 iOS 16.4+ 完全可靠；旧版即使写了也无效 - 若你目标是“和 Android 表现一致（严格卡死边界）”，必须用
none，且要接受它在旧 Safari 中彻底失效的事实
别指望 contain 兜底：它不是降级方案，而是不同语义——它设计初衷就是“允许局部弹性，阻止冒泡”，不是“弱化版 none”。
最常被忽略的一点：Safari 对滚动上下文的判定发生在 layout 阶段，不是样式计算阶段。JS 动态改高度、插入内容、或使用 resizeObserver 后未强制重排，都可能导致已写的 overscroll-behavior 突然失效——此时连 DevTools 都看不出问题，只能靠反复检查渲染树和滚动坐标系是否重建成功。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
