overscroll-behavior写在模态框容器上无效，因该元素不可滚动；必须作用于内部overflow-y-auto且有明确高度（如max-h-[70vh]）、无transform干扰、内容真实溢出的子元素，并手动配置tailwind的overscroll-y-contain工具类，ios 15–16还需js兜底。
直接加 overscroll-behavior-contain 到模态框容器上无效，必须作用于内部真正可滚动的子元素，并满足高度、上下文、兼容性三重前提。
为什么 overscroll-behavior 写了没反应
常见错误是把 overscroll-behavior-y: contain 加在 .modal（position: fixed 的外壳）上。这个元素本身不可滚动，浏览器直接忽略该声明。
- 必须设在内部有
overflow-y: auto且内容实际溢出的元素上，比如.modal__content或.modal-body - 该元素需有明确高度约束：
max-h-[70vh]、h-96等；否则无滚动条，属性不触发 - 父级不能含
transform、will-change或backface-visibility，这些会打断滚动上下文，iOS Safari 尤其敏感 - Tailwind 默认不提供方向拆分工具类，
overscroll-behavior-contain这种写法不会生效
如何在 Tailwind 中正确配置 overscroll-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]">
<ul>
<li>不要用 <code>overscroll-behavior-contain——Tailwind 不识别这个类名
y-contain 而非 none：保留 iOS 橡皮筋回弹，仅阻断向上传播scroll-snap-type 同时使用，iOS Safari 对二者组合支持极差iOS Safari 15–16 必须补 JS 兜底
即使 CSS 正确，在 iOS 15.x 和部分安卓 WebView 中仍可能穿透。此时需精准 JS 补漏：
- 监听
touchmove，用e.target.closest('.modal__content')判断是否在允许滚动区域外滑动 - 绑定事件必须带
{ passive: false }，否则preventDefault()在 iOS Safari 15+ 被静默忽略 - 不要全局禁用
body滚动（如overflow: hidden），会导致页面回滚到顶部
最容易被忽略的前提：滚动链必须真实存在
overscroll-behavior 生效的前提不是“写了”，而是“滚动链真实存在”——内容没溢出、高度计算异常、中间层用了 overflow-hidden，都会让该属性彻底静默。
检查点包括：max-h-[70vh] 是否被父级 flex 塌陷吃掉？modal-body 是否被 position: absolute 子元素撑开？html 或 body 上是否有未察觉的 overflow-x: hidden 干扰了垂直滚动上下文？
