移动端仅设 body { overflow: hidden } 失效，因滚动绑定在 html 元素且 body 高度塌陷；需同时设置 html、body { height: 100%; overflow: hidden; touch-action: none } 并配合 body { position: fixed } 及 JS 拦截 touchmove 才可靠禁用滚动。
移动端设置 body { overflow: hidden } 为什么经常失效
直接给 body 加 overflow: hidden 在 iOS Safari 和部分安卓 WebView 中大概率无效，尤其当页面内容高度超过视口时。根本原因是：移动端浏览器会把滚动行为绑定在 document.documentElement（即 html 元素）上，而非 body；body 默认是 height: auto，不参与滚动容器判定。
实操建议：
- 必须同时设置
html和body的overflow，且优先级要覆盖用户代理样式 - 补全
height: 100%或min-height: 100vh，避免因高度塌陷导致隐藏失败 - 若使用 React/Vue 等框架，注意 SSR 渲染时
html标签不可直接写内联样式，需通过全局 CSS 或document.documentElement.style动态控制
真正生效的 CSS 组合写法（iOS/Android 通吃）
以下规则缺一不可，且建议写在全局样式最底部或用 !important 提权：
html, body {
height: 100%;
overflow: hidden;
touch-action: none;
}
body {
position: fixed;
top: 0;
left: 0;
width: 100%;
}
touch-action: none 是关键补充——它禁用原生手势（包括双指缩放、滑动触发滚动），防止用户手指划动时绕过 overflow 规则。仅靠 overflow: hidden 无法阻止 iOS 上的“弹性滚动”惯性穿透。
立即学习“前端免费学习笔记（深入）”；
JavaScript 配合禁用滚动更可靠
CSS 方案在某些场景（如弹窗出现后又关闭）可能残留滚动能力，或被第三方库重置。此时需 JS 主动拦截：
- 监听
touchmove事件并调用event.preventDefault() - 只对
body绑定不够，iOS 必须在document或window级别捕获 - 记得保存原始
scrollTop，恢复时再设回去，否则页面会跳到顶部
示例（启用/禁用函数）：
let scrollPosition = 0;
function disableScroll() {
scrollPosition = window.pageYOffset;
document.body.style.position = 'fixed';
document.body.style.top = `-${scrollPosition}px`;
document.body.style.width = '100%';
}
function enableScroll() {
document.body.style.position = '';
document.body.style.top = '';
document.body.style.width = '';
window.scrollTo(0, scrollPosition);
}
容易被忽略的兼容性坑
某些安卓 WebView（如微信内置 X5 内核）对 position: fixed 支持不稳定，会导致 body 错位或闪烁；iOS 15+ 对 touch-action 的解析更严格，漏写会直接失效。
务必验证的点：
- 是否在
meta viewport中设置了user-scalable=no？没设的话双指缩放仍可触发滚动上下文 - 是否有子元素设置了
overflow-y: scroll并获得焦点？这会创建局部滚动区，绕过全局禁用 - 使用
resize或横竖屏切换后，需重新应用样式或 JS 状态，否则滚动可能意外恢复
禁用滚动不是加一行 CSS 就完事的事，得从渲染层、事件层、交互层三路堵死，漏掉任意一层都可能在某个机型上翻车。
