局部滚动容器弹窗时底层仍可滑动，需动态锁定实际滚动父容器（如.list-container）并设overflow:hidden，而非仅锁body；同时保存并恢复scrolly以防跳顶。

局部滚动容器打开时，外部页面仍能滑动——这不是样式没写对，而是滚动上下文没锁准。直接给 body 加 overflow: hidden 没用，因为滚动发生在子容器里，浏览器根本不会去查 body 的溢出状态。

为什么给 body 加 overflow: hidden 无效

滚动行为由「当前获得滚动焦点的元素」决定。如果用户正在拖拽的是一个 .list-container（设置了 max-height 和 overflow-y: auto），那它的滚动就和 body 完全无关。此时锁 body 就像关厨房门却让灶台继续冒火。

• 用 DevTools 选中正在滚动的区域，确认它的 overflow-y 是 auto 或 scroll
• 检查它是否有明确高度约束（height、max-height 或 flex: 1 等），否则 overflow 不触发
• 若该容器是 Vue/React 的根节点（如 #app），也要一并处理，不能只盯 body

正确做法：动态锁住实际滚动容器

弹窗出现时，找到真正承载滚动内容的父容器（比如 .content-scroller），临时设 overflow: hidden；关闭时还原。这比全局锁更精准，也不影响其他模块。

HTML汇报生成器

🚀 不用写一行代码！把项目总结、工作汇报、研究报告、技术文档、提案、数据看板直接变精美HTML。12种主题 × 11种背景动效 × 9种鼠标特效 × 10种边框样式 × 实时调色器 × 毛玻璃卡片 × PDF导出，生成后还能自由调色，零门槛AI直出。触发词：项目总结、工作汇报、PPT、生成报告、做个总结、HTML文档、数据报告、流程文档、会议纪要、技术文档、研究报告、数据看板、提案、做个展示页、帮我做个汇报、文档生成。

下载

• JavaScript 中用 element.style.overflow = 'hidden' 动态控制，避免污染 CSS 类
• 记得保存原始值（如 originalOverflow = element.style.overflow），关闭时恢复，别硬写 'auto' —— 原来可能是 scroll 或 visible
• 若容器用了 transform 或 will-change，可能造成合成层异常，导致 overflow: hidden 失效，可加 contain: layout paint 辅助

dialog.showModal() 能否替代手动锁

可以，但有强前提：dialog 必须已挂载在 document 中，且 showModal() 必须在用户手势回调（如 click、touchend）里调用。否则静默失败或报错。

• 禁止在 setTimeout、fetch.then 或组件 mounted 钩子中直接调用 —— 缺少用户激活上下文
• 不要用 display: none 隐藏 dialog，改用 hidden 属性或 visibility: hidden
• iOS Safari 下仍有透传风险，需额外加 touch-action: manipulation 到 dialog 元素上

移动端 touchmove 透传怎么防

即使 CSS 锁住了，iOS 和部分 Android WebView 仍可能把蒙层外的横向滑动传到底层。这不是 bug，是浏览器对「非精确触控区域」的 fallback 行为。

• 在弹窗显示后，对 document.body 绑定一次 touchmove 监听器，{ passive: false } 必须显式传入
• 仅当 e.target 不在弹窗及其可滚动子区域（如 .modal-content）内时才 e.preventDefault()
• DOM 层级过深（>6 层）会导致事件延迟，透传“时有时无”，建议扁平化结构或用 pointer-events: none 配合条件切换

最易被忽略的一点：滚动锚点丢失。无论用哪种方式锁，关闭后页面大概率跳回顶部，尤其在 iOS 上。必须自己存 window.scrollY，并在关闭后主动 window.scrollTo(0, savedY)，浏览器不帮你记。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！