禁用页面滚动应设置 body 的 overflow: hidden 而非仅拦截 touchmove 事件，因后者在 iOS Safari 等环境不可靠且无法阻止滚轮、方向键等；需配合 height: 100vh 防抖动、空字符串恢复样式，并处理广告层内部滚动及 iframe 限制。

广告弹出时禁止页面滚动，核心是冻结 body 的滚动行为，而不是靠 JS 拦截事件——后者在现代浏览器中既不可靠又影响性能。

为什么不能只用 event.preventDefault() 拦截 touchmove

移动端（尤其是 iOS Safari）对 touchmove 事件的 preventDefault() 有严格限制：若未显式声明 { passive: false }，浏览器会忽略阻止；即使加了，也可能触发“滚动卡顿”或被系统降级为 inert 状态。更关键的是，它无法阻止键盘方向键、鼠标滚轮、或 macOS 触控板惯性滚动等非 touch 途径。实际项目中，90% 的“禁滚动失效”都源于这条路走偏了。

• 必须设 { passive: false }，否则 Chrome/Firefox 直接静默忽略 preventDefault()
• iOS Safari 对连续 touchmove 阻止敏感，容易触发白屏或布局重排
• 桌面端鼠标滚轮、键盘上下键完全不受该监听影响

body 上设 overflow: hidden 是最稳方案

直接控制滚动容器本身，一劳永逸。但要注意两个硬条件：一是必须作用于 body（不是 html），因为多数浏览器以 body 为默认滚动根；二是要防布局跳动——隐藏滚动条会让视口变宽，导致内容右移。

DeepBI DHTML 页面生成器

生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur

下载

• 推荐写法：document.body.style.overflow = 'hidden'（打开广告时）
• 恢复时别只写 'auto'，用 ''（空字符串）清空内联样式，避免覆盖外部 CSS
• 加 document.body.style.height = '100vh' 可防止因滚动条消失引起的高度塌陷或抖动
• 若广告关闭后页面没回到原位置，记得补一句 window.scrollTo(0, scrollY)，其中 scrollY 是打开前存的值

广告容器自身也要防滚动泄露

如果广告层里有长内容（比如带列表的促销页），而你只锁了 body，用户仍可能在广告内部滚动——这不算 bug，但体验割裂。此时需单独处理广告 DOM：

• 给广告外层元素（如
  ）加 overflow-y: auto，并设明确 max-height
• 绝对不要对广告层设 overflow: hidden，否则里面的内容会被硬裁切，用户看不到完整信息
• 若广告含 iframe（比如第三方广告），它内部滚动无法被父页 CSS 控制，只能靠其自身支持 sandbox 或与上游协商禁用

真正难的不是“怎么禁”，而是“禁完怎么不露破绽”：滚动条消失后的宽度补偿、iOS 安全区域遮挡、position: fixed 元素在 overflow: hidden 下的渲染异常——这些细节不验证到真机就容易翻车。