overscroll-behavior在safari中无效的根本原因是ios 16.4前完全不支持，16.4+仅支持contain且需满足三条件：滚动容器有明确height/max-height、真实内容溢出并启用overflow-y-auto、父级无transform/will-change干扰。
为什么 overscroll-behavior 在 Safari 里写了也没用
不是你漏写了分号或拼错单词，而是 Safari 直到 iOS 16.4 才开始支持 overscroll-behavior，且只认 contain，none 和 auto 会被静默忽略。更关键的是：它只在「原生滚动容器」上生效，而很多所谓“可滚动”的元素根本没被 Safari 当作滚动上下文——比如靠 flex 自动撑高的容器、没设 height 或 max-height 的 div，哪怕加了 overflow-y-auto，浏览器也直接跳过该属性。
必须满足的三个硬性条件
缺一不可，否则 overscroll-behavior 就是摆设：
- 滚动容器本身要有明确高度（
h-96、max-h-[500px]等），不能依赖min-h-full或父级flex撑开 - 容器必须有
overflow-y-auto（或scroll），且内容真实超出该高度（空 div + overflow 不算） - 父级不能含
transform、will-change或-webkit-overflow-scrolling: touch—— Safari 会直接禁用 overscroll 行为
Tailwind 用户怎么加 overscroll-behavior 类
Tailwind 默认不提供 overscroll-behavior 工具类，v3.4+ 虽支持 overscroll-y-contain，但旧项目或定制需求仍需手动扩展：
在 tailwind.config.js 中添加插件：
规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
plugins: [
require('tailwindcss/plugin')(({ addUtilities }) => {
addUtilities({
'.overscroll-y-contain': { 'overscroll-behavior-y': 'contain' },
'.overscroll-none': { 'overscroll-behavior': 'none' },
})
})
]
然后在滚动容器上用：class="overscroll-y-contain overflow-y-auto h-96"。注意：overscroll-y-contain 必须和 overflow-y-auto 同时存在，且不能写在 或 position: fixed 的弹窗 wrapper 上——它得作用于真正滚动的子元素，比如 .modal-content。
iOS 15 及更早版本的兜底方案
别指望 JS 全局拦截 touchmove，那会锁死所有内部滚动。稳妥做法是分层控制：
- 先检测支持：
CSS.supports('overscroll-behavior', 'contain') - 不支持时，只对非滚动区域拦截：
e.target.closest('.scrollable')为空才调e.preventDefault() - 必须传
{ passive: false }，否则 iOS Safari 会忽略 - 避免
body { overflow: hidden }—— 它会重置滚动位置、导致键盘弹出后焦点丢失
真正难的从来不是加一行 CSS，而是确认哪个元素在滚动、它是否真的进入了可滚动状态、以及有没有某个看不见的 transform 正在悄悄关掉 overscroll 开关。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
