overflow: hidden 在 iOS Safari 中对 body/html 失效,因其滚动由系统级手势处理,仅裁剪内容而不阻断滚动;需配合 position: fixed、显式高度及 overscroll-behavior 或 JS 拦截才能可靠禁用滚动。

直接说结论:overflow: hidden 在 iPhone(iOS Safari)上对 body 或 html 失效,不是你写错了,而是浏览器故意忽略——它不把滚动事件绑定在这些元素上,也不响应它们的溢出控制。
为什么 iOS Safari 无视 body { overflow: hidden }
iOS 的滚动机制和桌面/安卓完全不同:它的主滚动容器是 body 元素本身,但滚动行为由系统级 gesture handler 管理,overflow 属性仅影响“内容裁剪”,不干预 touch 滚动链路。结果就是:样式写了,DOM 上也生效了,但手指一划,页面照常回弹、照常滚动。
更麻烦的是,这个限制还带条件:
-
body没设height或max-height时,overflow: hidden直接被跳过 - 即使加了
height: 100vh,Safari 仍可能因视口缩放、键盘唤起等导致计算偏差,让 overflow 失效 -
html上设overflow: hidden完全没用——iOS 不读这个节点的滚动策略
overflow-y: hidden 单独写更危险
很多人想“只锁纵向”,于是写 body { overflow-y: hidden },这在 iOS 上比全量 overflow: hidden 还容易翻车:
立即学习“前端免费学习笔记(深入)”;
- 部分旧版 Safari(iOS 15 及更早)会把
overflow-y: hidden当作无效声明整体丢弃 - 如果父容器用 flex 或 grid 布局撑高,但没显式 height,
overflow-y就彻底不触发渲染层,等于没写 - 简写形式如
overflow: hidden auto在某些 WebView 中会被解析成overflow: auto,反而打开滚动
真正可靠的做法是:用完整值 overflow: hidden + 显式高度约束 + 渲染层触发,三者缺一不可。
遮罩弹出时背景还在滚?问题不在 overflow
常见场景:点击按钮弹出 modal,背景却还能上下滑——这不是 overflow 没生效,而是滚动事件穿透到了 body。iOS 默认允许“滚动传播”(overscroll chaining),哪怕遮罩容器自己设置了 overflow: auto,拖到底部继续划,就会把外层带起来。
解决它不能只靠 CSS 锁 body:
-
overscroll-behavior-y: contain必须加在遮罩容器自身(比如<div class="modal">),且该容器必须可滚动(即有 <code>overflow-y: auto) - Safari 16.4+ 才原生支持
overscroll-behavior;更低版本得用 JS 拦截:touchmove时判断是否在容器内、是否已到顶/底,再决定是否preventDefault() - 光加
overflow: hidden到body,不记录并还原scrollTop,关闭弹窗时页面会“啪”地跳回顶部
最稳的落地组合(含 JS 协同)
纯 CSS 搞不定,必须 JS 配合。以下是最小可行组合,已在 iOS 15–17 实测有效:
① 遮罩显示时:
const scrollTop = document.body.scrollTop || window.pageYOffset;
document.body.style.position = 'fixed';
document.body.style.top = `-${scrollTop}px`;
document.body.classList.add('no-scroll');
② 对应 CSS:
.no-scroll {
overflow: hidden;
height: 100vh;
width: 100vw;
}
③ 遮罩关闭时:
document.body.classList.remove('no-scroll');
document.body.style.position = '';
document.body.style.top = '';
window.scrollTo(0, scrollTop);
注意:别漏掉 window.scrollTo 这一步——这是 iOS 上保持滚动位置唯一靠谱的方式,scrollTop 赋值在 fixed 后会失效。
复杂点在于,它不是单一样式问题,而是滚动权归属、事件传播路径、渲染层触发、历史滚动位点四个层面同时要对齐。少一个,iPhone 上就大概率滑得动。


















