overscroll-behavior在ios safari中仅对非根元素生效，且需满足三条件：overflow-y为auto/scroll、有明确高度、内容真实溢出；ios 16.4+仅支持contain值，且受transform等属性干扰；框架滚动组件须穿透设置，嵌套滚动各层均需单独声明。
overscroll-behavior写在body或html上根本不会生效
这不是拼写错误或漏加分号的问题，而是 iOS Safari（包括所有 WebKit 内核浏览器）从底层就禁用了对根元素的 overscroll-behavior 控制。你写 body { overscroll-behavior: none; }，在开发者工具里看到该声明被标灰、Computed Styles 中不出现，说明浏览器压根没解析它——不是失效，是直接忽略。
真正能起作用的位置必须是「实际发生滚动的子容器」，比如：.modal-content、#chat-list、.scroll-view__content。这些元素得同时满足三个硬性条件，缺一不可：
-
overflow-y: auto或scroll（不能是hidden） - 有明确高度：用
height、max-height（如h-96、max-h-[400px]），不能靠flex自动撑开或min-h-full - 内容真实溢出该高度（空
div+overflow-y-auto不算）
iOS 16.4 之前完全不支持，之后也只认 contain
iOS 16.4 是分水岭。此前版本（包括 iOS 15.x、14.x 等）对 overscroll-behavior 零支持，写了等于白写。16.4+ 虽然加了支持，但仅识别 contain 值；none 和 auto 仍被静默忽略。
这意味着如果你依赖 overscroll-behavior-y: none 来彻底禁用回弹，它在 Safari 中大概率不会按预期工作。更麻烦的是，即使你写了 contain，只要父级存在以下任一属性，Safari 也会直接跳过该声明：
-
transform（哪怕只是transform: translateZ(0)） will-change: transform-
-webkit-overflow-scrolling: touch（旧式 iOS 滚动优化，已弃用但仍有项目残留）
框架封装的滚动组件必须穿透设置
像 <uni-scroll-view></uni-scroll-view>（uni-app）、<scroll-view></scroll-view>（微信小程序）、vue-virtual-scroller 这类组件，滚动行为发生在内部渲染节点上，比如 .uni-scroll-view-content。直接给组件标签加样式毫无意义。
规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
必须用深度选择器命中真实滚动区域：
- Vue 2：
::deep(.uni-scroll-view-content) { overscroll-behavior-y: contain; } - Vue 3：
:::v-deep(.uni-scroll-view-content) { overscroll-behavior-y: contain; } - 微信小程序：在自定义组件样式中单独声明
scroll-view .scroll-content类，不能只设在scroll-view标签上
嵌套滚动时每一层都得单独声明
常见误区是只在弹窗外层加了 overscroll-behavior-y: contain，结果手指在弹窗内列表拉到底部，背景页还是跟着回弹。这是因为滚动事件在内层停住后，仍会冒泡到外层可滚动容器。
解决方法很简单：所有独立可滚动的层级都要显式声明。例如模态框结构为 .modal > .modal-body > .chat-list，且三者都设置了 overflow-y: auto，那就得分别加：
.modal-body { overscroll-behavior-y: contain; }.chat-list { overscroll-behavior-y: contain; }
漏掉任意一层，滚动穿透就可能发生。尤其要注意那些“看起来不可滚动但其实可以”的元素——比如用 flex + overflow-y-auto 实现的聊天窗口，它很可能就是那个被忽略的中间层。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
