HTML全屏弹窗滚动导致底层网页滑动怎么办？滚动穿透布局处理指南-html教程-PHP中文网

ios safari中body{overflow:hidden}完全失效，因其滚动链机制会绕过该声明，触发扬皮筋回弹时仍交由document根节点处理，导致页面晃动、回顶、宽度突变抖动。

html全屏弹窗滚动导致底层网页滑动怎么办？滚动穿透布局处理指南

body overflow:hidden 在 iOS 上为什么完全失效

因为 iOS Safari 的滚动链（Scroll Chaining）机制会绕过 overflow: hidden，尤其在触发橡皮筋回弹时，浏览器仍会把 touchmove 事件交给 document 根节点处理。哪怕你加了 body { overflow: hidden; }，手指一拖到底部，底层页面照样跟着晃。

更麻烦的是：一旦设置 overflow: hidden，body 会瞬间跳回顶部，滚动位置丢失；同时横向滚动条消失，导致页面宽度突变、内容左移——这就是常说的“抖动”。

所以别只写这一行 CSS：

body.modal-lock { overflow: hidden; }

必须配合以下操作才可能起效：

打开弹窗前先记录 document.documentElement.scrollTop 和 document.body.scrollTop（两者都要读，不同内核默认不同）
用 position: fixed 替代纯 overflow 控制，避免回顶
还原时清空整个 style.cssText，不能只设 position: static，否则残留的 top 值会干扰后续滚动

touchmove 阻止后弹窗内部无法滚动怎么办

直接在遮罩层上监听 touchmove 并调 e.preventDefault()，最常见后果就是：弹窗里带长列表或表单的区域也滚不动了。iOS 还会因此丢失阻尼效果，滑起来像卡顿。

真正可行的做法是「条件拦截」：只在用户滑动非可滚动子区域时阻止事件。

关键点在于判断目标是否落在可滚动容器内：

mask.addEventListener('touchmove', (e) => {
  if (!e.target.closest('.modal-content, .scrollable')) {
    e.preventDefault();
  }
}, { passive: false });

注意：{ passive: false } 必须显式声明，否则现代浏览器会忽略 preventDefault()；.modal-content 要是你自己定义的、允许内部滚动的容器类名，不能是遮罩层本身。

如果弹窗里有 <input> 或 <textarea></textarea>，还要额外排除聚焦状态，否则软键盘唤起时会异常：

Doc To HTML

使用 MinerU 文档处理引擎将 Word 文档（.doc、.docx）转换为保留结构和格式的干净 HTML。

下载

监听 focusin 临时解除锁定
监听 blur 后恢复锁定逻辑
避免对 document 全局绑定 touchmove，容易误伤轮播图、手势缩放等交互

position:fixed + top 偏移方案的兼容性坑

这是目前生产环境最稳的方案，但细节一错就翻车。核心不是“加 fixed”，而是“加得干净、去得彻底”。

典型错误写法：

document.body.style.position = 'fixed';
document.body.style.top = `-${scrollTop}px`;

问题在于：style 是覆盖式赋值，如果 body 原本有 inline style（比如某些 UI 库动态加的），会被清掉；且没设 width: 100%，在部分安卓 WebView 下会出现横向滚动条。

推荐写法（保留原有样式、防抖动、防宽度突变）：

const originalStyle = document.body.getAttribute('style') || '';
document.body.setAttribute('data-locked-style', originalStyle);
document.body.style.cssText = `position: fixed; width: 100vw; left: 0; top: -${scrollTop}px; overflow: hidden;`;

关闭时务必按顺序还原：