四种防止模态框弹出时页面滚动的方法-51CTO.COM

让我们面对现实吧，可怕的“滚动离开”时刻——当用户点击模式时，整个页面却继续向下滚动，这种尴尬的情况！这会打乱流程，让用户感到沮丧，并带来不太好的体验。

但不要害怕，各位小伙伴！为了防止这种常见的网站烦恼比您想象的要容易。以下是4种久经考验的方法，每种方法都有自己的优点和缺点：

overflow:hidden CSS 属性是一种久经考验的防止滚动的方法。只需将一个类（例如，no-scroll）添加到 <body> 标签，并将其链接到带有 overflow:hidden 的 CSS 规则。

.no-scroll {
  overflow: hidden;
}

当模态框弹出时，使用 JavaScript 添加此类，并在模态框关闭时将其删除。此方法会停止滚动并隐藏滚动条。

想要在模态框弹出时保持页面原位？position: fixed 可以提供帮助！

向<body> 添加 no-scroll 之类的类并应用以下 CSS：

.no-scroll {
  position: fixed;
  width: 100%;
}

这会将页面锚定到视口，保持其原始宽度。请记住确保您的模态框具有适当的高度，否则内容可能会被截断。

对于更注重 JavaScript 的方法，我们可以使用滚动事件在模态框出现时禁用滚动。

document.addEventListener('scroll', disableScroll);
function disableScroll() {
  window.scrollTo(0, 0);
}

当模式关闭时，删除事件监听器以重新启用滚动。此方法不需要更改 CSS，并且在桌面和移动设备上都能很好地工作。

准备好采用更现代的方法了吗？overscroll-behavior 属性可以控制页面边缘的滚动行为。

.popup {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  overscroll-behavior: contain;
}

通过将其设置为包含，可以阻止页面滚动，但允许在模式本身内滚动。请记住在模式关闭时删除此属性。

这 4 种方法都提供了在模式弹出时，阻止页面滚动的不同方法。再具体项目开发时，我们需要选择适合自己项目的情况，来匹配项目的需要，不能随意选择。