如何解决Tailwind CSS弹窗滚动穿透

overscroll-behavior需作用于真正可滚动的子元素而非弹窗容器本身，必须配合明确高度约束、避免transform等打断滚动上下文的属性，并在Tailwind中正确配置方向工具类及JS兜底。

overscroll-behavior 能解决，但直接加在弹窗容器上基本无效——它只对真正可滚动的子元素起作用。

为什么 overscroll-behavior 写了没反应

常见错误是把 overscroll-behavior: contain 加在 .modal（position: fixed 的壳子）上。这个元素本身不可滚动，浏览器直接忽略该声明。

1. 必须设在内部有 overflow-y: auto 且内容实际溢出的元素上，比如 .modal__content 或 .modal-body
2. 该元素需有明确高度约束：max-height: 80vh、h-96 等，否则无滚动条，属性不触发
3. 父级不能含 transform、will-change 或 backface-visibility，这些会打断滚动上下文，iOS Safari 尤其敏感
4. Tailwind 默认不提供 overscroll-behavior 工具类，overscroll-behavior-contain 这种写法不会生效

在 Tailwind 中正确配置 overscroll-behavior-y-contain

Tailwind v3.4+ 支持方向拆分，但需手动注册工具类。直接在 tailwind.config.js 中添加：

module.exports = {theme: {extend: {overscrollBehavior: {'auto': 'auto','contain': 'contain','none': 'none',}}},plugins: [require('tailwindcss/plugin')(({ addUtilities }) => {addUtilities({'.overscroll-y-contain': { 'overscroll-behavior-y': 'contain' },})})]}

然后在可滚动内容区使用：<div class="overscroll-y-contain overflow-y-auto max-h-[70vh]">

1. 不要用 overscroll-behavior-contain —— Tailwind 不识别这个类名
2. 推荐用 y-contain 而非 none：保留 iOS 橡皮筋回弹，仅阻断向上传播
3. 避免与 scroll-snap-type 同时使用，iOS Safari 对二者组合支持极差

iOS Safari 15–16 必须补 JS 兜底

即使 CSS 正确，在 iOS 15.x 和部分安卓 WebView 中仍可能穿透。此时需精准 JS 补漏：

1. 监听 touchmove，用 e.target.closest('.modal__content') 判断是否在允许滚动区域外滑动
2. 绑定事件必须带 { passive: false }，否则 preventDefault() 在 iOS Safari 15+ 被静默忽略
3. 不要全局禁用 body 滚动（如 overflow: hidden），会导致页面回滚到顶部

最易被忽略的点：属性生效的前提不是“写了”，而是“滚动链真实存在”——内容没溢出、高度计算异常、中间层用了 overflow-hidden，都会让 overscroll-behavior 彻底静默失效。