如何在对话框打开时阻止页面滚动

打开模态对话框应该将用户的注意力集中在该对话框上——而不是让他们滚动背后的页面。然而,阻止背景滚动仍然出乎意料地困难,尤其是当你需要可靠的 iOS Safari 滚动锁定行为时。

<dialog> 元素配合 showModal() 方法可以自动处理交互阻止。浏览器会将对话框外的所有内容标记为 inert,从而阻止点击和键盘导航。但滚动阻止呢?这是平台没有完全解决的另一个问题。

本文涵盖了滚动锁定模态对话框实现的主要方法、它们的权衡取舍,以及为什么没有单一解决方案能在所有地方完美运行。

showModal() 做了什么和没做什么

当你调用 dialog.showModal() 时,浏览器会:

• 在顶层显示对话框
• 创建一个 ::backdrop 伪元素
• 使背景内容变为惰性(阻止指针和键盘交互)
• 在对话框内捕获焦点

它不会做的是:在所有浏览器和设备上可靠地阻止背景滚动。在某些平台上——最明显的是移动端——用户仍然可以使用触摸手势或滚轮滚动页面。

简单的 CSS 方法:overflow: hidden

最常见的解决方案使用 :has() 选择器来检测打开的对话框:

body:has(dialog[open]) {
  overflow: hidden;
}

这在大多数桌面浏览器上有效。当对话框打开时,页面变为不可滚动。

**问题在于:**这种方法在 iOS Safari 上不可靠。触摸滚动通常会绕过 body 上的 overflow: hidden,仍然允许用户滚动背景。如果你的受众包括移动 Safari 用户,你需要更强大的解决方案。

跨浏览器可靠性的固定 Body 技术

最可靠的跨浏览器解决方案——包括 iOS Safari 滚动锁定——使用 JavaScript 将 body 固定在原位:

let scrollPosition = 0;

function lockScroll() {
  scrollPosition = window.scrollY;
  document.body.style.position = 'fixed';
  document.body.style.top = `-${scrollPosition}px`;
  document.body.style.width = '100%';
}

function unlockScroll() {
  document.body.style.position = '';
  document.body.style.top = '';
  document.body.style.width = '';
  window.scrollTo(0, scrollPosition);
}

在打开对话框时调用 lockScroll(),关闭时调用 unlockScroll()。

这种技术存储滚动位置,固定 body 使其无法滚动,然后在关闭时恢复一切。它可以处理 iOS 上的触摸滚动,因为 body 实际上无法移动。

**权衡:**如果滚动条消失,你可能会看到布局偏移。通过在锁定时添加等于滚动条宽度的 padding-right 来补偿。

用于滚动链的 CSS overscroll-behavior

overscroll-behavior 属性可以防止滚动链——当在一个元素内滚动到达边界后导致父元素滚动。

dialog {
  overscroll-behavior: contain;
}

dialog::backdrop {
  overscroll-behavior: contain;
}

最近的 Chromium 版本(2025 年末+)改进了这种行为,使其即使在不可滚动的容器上也能工作。这有助于在 Chrome 中实现 HTML 对话框滚动锁定,但其他浏览器尚未完全跟进。

**重要提示:**CSS overscroll-behavior 模态解决方案防止的是滚动链,而不是滚动本身。如果用户直接在背景或 body 上滚动,overscroll-behavior 不会阻止它。将此与其他技术结合使用,而不是作为替代方案。

你应该了解的 iOS Safari 特性

iOS Safari 在模态实现中阻止背景滚动方面存在独特的挑战:

• body 上的 overflow: hidden 无法可靠地阻止触摸滚动
• 橡皮筋过度滚动效果可能触发背景移动
• 虚拟键盘的出现可能导致意外的滚动行为

固定 body 技术仍然是最可靠的解决方案。一些开发者还会在背景元素(而非对话框本身)上添加 touch-action: none,尽管如果应用范围过广,这可能会干扰对话框内的滚动。

保持对话框可滚动

一个关键细节:如果对话框内容超过视口高度,对话框本身必须可滚动。在对话框上设置适当的 max-height 和 overflow-y: auto:

dialog {
  max-height: 90vh;
  overflow-y: auto;
}

阻止所有滚动会造成可访问性问题。用户需要访问所有对话框内容。

关于 Popover API 的说明

Popover API 用于轻量级覆盖层,但不是模态对话框的直接替代品。Popover 不会以相同方式阻止背景交互,并且滚动锁定行为也不同。对于需要滚动锁定的真正模态体验,请坚持使用 <dialog> 和 showModal()。

选择你的方法

对于仅限桌面的应用程序,使用 overflow: hidden 的 CSS :has() 方法通常就足够了。对于跨浏览器可靠性——尤其是 iOS Safari——使用带有滚动位置恢复的固定 body 技术。在支持的浏览器中,在此基础上叠加 overscroll-behavior: contain 以防止滚动链。

结论

没有解决方案能在所有地方完美运行。固定 body 技术提供了最可靠的跨浏览器滚动锁定,特别是对于 iOS Safari。将其与 overscroll-behavior: contain 结合使用,以在 Chromium 浏览器中提供额外的滚动链保护。在真实设备上进行测试,特别是 iOS Safari,并接受某些边缘情况可能需要妥协。

常见问题

Understand every bug

Uncover frustrations, understand bugs and fix slowdowns like never before with OpenReplay — the open-source session replay tool for developers. Self-host it in minutes, and have complete control over your customer data. Check our GitHub repo and join the thousands of developers in our community.