HTML复杂交互弹窗遮罩层在移动端的防穿透结构-html教程-PHP中文网

遮罩层必须作为body直接子元素且用position:fixed+top/left/width/height控制，禁止嵌套在滚动容器内；滚动穿透需通过body设position:fixed并缓存scrolltop解决；交互事件统一用touchend替代click。

html复杂交互弹窗遮罩层在移动端的防穿透结构

遮罩层必须用 fixed + z-index 控制层级，别嵌套在 body 滚动容器里

遮罩层（.overlay）如果被塞进一个 overflow-y: scroll 的父容器里，哪怕它自己是 position: fixed，在 iOS Safari 和部分安卓 WebView 中仍会受父容器滚动影响，导致 touchmove 时穿透到底层。真正有效的结构是让它直接挂载在 document.body 下，且不被任何带滚动的 wrapper 包裹。

常见错误写法：
<div class="page-wrapper" style="overflow-y: scroll"><div class="overlay"></div></div>
这种结构下，.overlay 的 fixed 会相对于最近的「有 transform 或 filter 的祖先」定位，而不是视口，极易失效。

正确 DOM 位置：遮罩层必须是 body 的**直接子元素**
CSS 中确保 .overlay 有 position: fixed; top: 0; left: 0; width: 100%; height: 100%;
不要给 body 或 html 加 transform、filter、will-change 等触发新层叠上下文的属性

滚动穿透必须靠 body 固定 + scrollTop 缓存，overflow:hidden 不可靠

单纯给 html 或 body 加 overflow: hidden 在 iOS 上基本无效，在部分安卓机型上还会导致页面跳回顶部或抖动。真正稳定的做法是：弹出时把 body 设为 position: fixed，并用 top 抵消当前滚动偏移；关闭时还原。

关键代码逻辑：

const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
document.body.style.cssText = `position: fixed; width: 100%; top: -${scrollTop}px;`;
// 弹窗关闭后
document.body.style.cssText = '';
document.documentElement.scrollTop = scrollTop;
document.body.scrollTop = scrollTop;

必须同时读取 document.documentElement.scrollTop 和 document.body.scrollTop，不同浏览器默认行为不同
还原时不能只设 position: static，要清空整个 style.cssText，避免残留 top 值干扰后续滚动
别用 document.scrollingElement——IE 和旧版 Safari 不支持

可滚动弹窗内容需单独包裹，禁止对遮罩层本身监听 touchmove

如果弹窗内部需要滚动（比如长表单、列表），千万别在 .overlay 或 .modal 根节点上加 @touchmove.prevent 或 event.preventDefault()。这会导致：内部区域无法滚动、iOS 阻尼效果丢失、input 失焦异常。

html-deploy

使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。

下载

正确做法是只对「不可滚动的遮罩背景层」禁用 touchmove，而让「弹窗主体内容区」保持原生滚动能力：

<div class="overlay">
  <div class="overlay-bg"></div>
  <div class="modal-content">...</div>
</div>

.overlay-bg 是纯黑半透层，负责点击关闭和视觉遮挡，加 touchmove.stop 安全且必要
.modal-content 必须有明确高度 + overflow-y: auto，且内部不设 touchmove 监听
避免在 .overlay 上绑定任何 touchmove 事件处理器——它不是滚动容器，只是容器壳

点击穿透必须用 touchend 替代 click，且禁用 a 标签默认跳转

遮罩层关闭按钮若用 click，300ms 延迟会让底层元素接收后续 click，尤其在快速操作时明显。这不是 bug，是移动端双击缩放机制的必然结果。

解决方案不是加 pointer-events: none（易翻车），而是统一用 touchend：

el.addEventListener('touchend', e => {
  e.preventDefault();
  modal.hide();
});

所有交互按钮（包括关闭、确认、取消）都必须监听 touchend，而非 click
带 href 的 <a></a> 标签必须移除 href，改用 location.href = 'xxx' 或 history.pushState
不兼容 PC？加个判断：'ontouchstart' in window ? 'touchend' : 'click'，但别混用