ios safari 直到16.4才部分支持 overscroll-behavior，仅识别 contain 且需明确 height/max-height 的原生滚动容器；旧式 -webkit-overflow-scrolling: touch 会禁用该属性。
overscroll-behavior 在 iOS Safari 中默认不生效，不是你写错了，而是它压根没被实现 —— iOS 16 之前完全不支持，iOS 16+ 虽然加了支持，但仅限于 overscroll-behavior: contain，且必须配合特定滚动上下文才起作用。
为什么 iOS 上 overscroll-behavior 看似写了却没用？
根本原因有两个：
- iOS Safari 直到
iOS 16.4才开始部分支持overscroll-behavior，且只认contain，none和auto仍被忽略 - 即使写了
overscroll-behavior: contain，也只在「原生滚动容器」中生效 —— 比如overflow: auto或scroll的元素，但前提是该元素必须有明确的height或max-height（不能是min-height或依赖 flex 布局自动撑开） - 更隐蔽的一点：如果父容器用了
-webkit-overflow-scrolling: touch（旧式 iOS 滚动优化），会直接禁用overscroll-behavior
替代方案：用 touch-action + preventDefault 拦截滚动穿透
当 overscroll-behavior 不可用时，最可靠的方式是手动拦截 touch 事件。典型场景是模态框（.modal）内滚动到底后，不希望背景页跟着滚。
实操建议：
- 给模态框滚动容器绑定
touchmove事件，检测是否到达边界（scrollTop === 0 && e.touches[0].clientY > touchStartY或触底类似判断） - 只在真正需要阻止时调用
e.preventDefault()，避免影响正常滚动 - 同时设置
touch-action: pan-y（或none）在容器上，能减少 iOS 的“弹性回弹”干扰 - 注意：不要全局阻止
touchmove，否则会影响内部可滚动区域的正常使用
示例关键代码：
modalScroller.addEventListener('touchstart', e => {
touchStartY = e.touches[0].clientY;
});
modalScroller.addEventListener('touchmove', e => {
const scrollTop = modalScroller.scrollTop;
const scrollHeight = modalScroller.scrollHeight;
const clientHeight = modalScroller.clientHeight;
const touchY = e.touches[0].clientY;
if (scrollTop === 0 && touchY > touchStartY) {
e.preventDefault();
} else if (scrollTop + clientHeight >= scrollHeight && touchY
<h3>兼容性兜底：检测 iOS 并降级为 <code>position: fixed</code> 锁定背景</h3>
<p>对简单场景（比如全屏弹层），与其硬扛滚动穿透，不如换思路：把背景 <code>body</code> 设为 <code>position: fixed</code>，并记录 <code>scrollY</code> 做补偿。</p>
<p>要点：</p>
- 打开弹层前：保存
document.documentElement.scrollTop，然后设body.style.top = -${savedY}px、body.style.position = 'fixed' - 关闭弹层后：恢复
body.style.position = ''，再window.scrollTo(0, savedY) - 必须加
body { width: 100%; overflow-x: hidden; }，否则 iOS 会出现横向滚动条 - 这个方案在所有 iOS 版本都有效，但要注意和第三方库（如 antd、vue-router）的滚动行为冲突
真正麻烦的不是写几行 CSS，而是 iOS 滚动机制本身不暴露底层控制权 —— overscroll-behavior 是个“理想接口”，但在移动端长期处于半残状态。动手前先查 navigator.userAgent 是否含 iOS 或 ，再决定走哪条路。别指望一次 CSS 解决所有问题。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
