不能只靠 overscroll-behavior 实现跨浏览器兼容，尤其在 ios 16.4 之前必须降级；它只在“滚动真正发生”的容器上生效，且 safari 对 none 值长期不支持。
直接说结论：不能只靠 overscroll-behavior 实现跨浏览器兼容，尤其在 iOS 16.4 之前必须降级；它只在“滚动真正发生”的容器上生效，且 Safari 对 none 值长期不支持。
为什么 overscroll-behavior 在 iOS 上经常失效
iOS Safari 直到 16.4 才开始支持 overscroll-behavior，而且只认 contain —— none 和双值写法（如 contain auto）全被忽略。更关键的是，它只对「原生滚动容器」起作用：
- 必须有明确的
height或max-height（flex: 1或min-height不行） - 必须设置
overflow-y: auto（或scroll），且内容实际超出高度 - 父级若用了已废弃的
-webkit-overflow-scrolling: touch，该属性直接被禁用
正确写法：只设在真实滚动子元素上，不是弹窗 wrapper
常见错误是把 overscroll-behavior: contain 写在 .modal（position: fixed 容器）上——它本身不可滚动，CSS 规则被浏览器静默丢弃。
- ✅ 正确目标：
.modal__content、.chat-list、.sidebar-menu等内部有overflow-y: auto+ 明确高度限制的元素 - ❌ 错误目标：
body、.modal、.overlay（这些不是滚动源，不参与 scroll chain） - 推荐写法：
overscroll-behavior-y: contain（保留横向轮播等正常行为），避免全轴锁死
兼容性兜底：检测支持 + 精准拦截 touchmove
不能全局 preventDefault()，否则会锁死所有内部滚动；也不能简单给 body { overflow: hidden }，它会重置 scrollTop、影响键盘弹出后的焦点可见性。
- 先检测：
CSS.supports('overscroll-behavior', 'contain')，仅在不支持时启用 JS 逻辑 - 只监听目标滚动容器的
touchmove，并判断是否真触顶/触底：scrollTop === 0 && touchY > touchStartY - 绑定
touch-action: pan-y到容器上，减少 iOS 弹性回弹干扰 - 注意 passive 选项：
{ passive: false }必须显式传入，否则preventDefault()无效
容易被忽略的关键点
最常被跳过的不是写法，而是验证环节：你得确认那个加了 overscroll-behavior 的元素，此刻是否真的在滚动链中 —— 它必须可滚动、内容已超限、且父级没有用 overflow: hidden 或 transform 隔断 scroll chain。iOS 旧版里，哪怕 CSS 写对了，只要容器高度靠 flex 自动计算，就等于没写。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
