overscroll-behavior需作用于真正可滚动的子元素而非弹窗容器本身，必须配合明确高度约束、避免transform等打断滚动上下文的属性，并在tailwind中正确配置方向工具类及js兜底。
overscroll-behavior 能解决，但直接加在弹窗容器上基本无效——它只对真正可滚动的子元素起作用。
为什么 overscroll-behavior 写了没反应
常见错误是把 overscroll-behavior: contain 加在 .modal（position: fixed 的壳子）上。这个元素本身不可滚动，浏览器直接忽略该声明。
- 必须设在内部有
overflow-y: auto且内容实际溢出的元素上，比如.modal__content或.modal-body - 该元素需有明确高度约束：
max-height: 80vh、h-96等，否则无滚动条，属性不触发 - 父级不能含
transform、will-change或backface-visibility，这些会打断滚动上下文，iOS Safari 尤其敏感 - 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]">
<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），会导致页面回滚到顶部
最易被忽略的点：属性生效的前提不是“写了”，而是“滚动链真实存在”——内容没溢出、高度计算异常、中间层用了 overflow-hidden，都会让 overscroll-behavior 彻底静默失效。
