在模态打开时防止页面滚动

阻止模态框打开时页面滚动

你是否遇到过这种情况：打开一个模态框，在其中滚动，关闭它后，页面却跳转到了其他位置？

这是因为模态框只是页面上的一个元素，它可能保持在原位，但页面其余部分仍然正常运行。

有时这无关紧要，例如屏幕高度正好等于视口高度的情况。但在其他情况下，就会出现滚动问题。好消息是，我们可以通过一些CSS（和JavaScript）技巧来防止这种情况。

从简单的方案开始

我们可以通过将整个body的高度设置为视口全高，并在模态框打开时隐藏垂直溢出来大幅减少模态框打开时页面滚动的问题：

<code>body.modal-open {
  height: 100vh;
  overflow-y: hidden;
}</code>

这很好，但是如果我们在打开模态框之前已经滚动过页面元素，就会出现轻微的水平重排。视口宽度会增加大约15像素，这正是滚动条的宽度。让我们稍微调整一下body的右填充来避免这种情况。

<code>body {
  height: 100vh;
  overflow-y: hidden;
  padding-right: 15px; /* 避免宽度重排 */
}</code>

请注意，模态框的高度必须小于视口高度才能使此方法有效。否则，body上的滚动条将是必要的。

移动端怎么办？

此解决方案在桌面端和安卓移动端效果都很好。但是，iOS Safari 需要更多处理，因为在触摸屏上点击和移动时，模态框打开时body仍然会滚动。

我们可以将body设置为固定定位作为解决方法：

<code>body {
  position: fixed;
}</code>

现在可以了！触摸屏幕时，body将不会响应。但是，这里仍然存在一个“小”问题。假设模态框触发器在页面下方，我们点击打开它。很好！但是现在我们自动滚动到屏幕顶部，这与我们试图解决的滚动行为一样令人困惑。

糟糕！

因此我们需要使用JavaScript

我们可以使用JavaScript来避免触摸事件冒泡。我们都知道，模态框打开时应该有一个背景层。不幸的是，在iOS中，stopPropagation与触摸事件配合使用有点尴尬。但是preventDefault效果很好。这意味着我们必须在模态框中包含的每个DOM节点中添加事件监听器——不仅仅是在背景或模态框层上。好消息是，许多JavaScript库都可以做到这一点，包括久经考验的jQuery。

还有一件事：如果我们需要在模态框内部滚动呢？我们仍然需要触发触摸事件的响应，但是当到达模态框顶部或底部时，我们仍然需要阻止冒泡。这似乎非常复杂，所以我们还没有完全解决问题。

增强固定body方法

我们正在使用的是：

<code>body {
  position: fixed;
}</code>

如果我们知道滚动的顶部位置并将其添加到我们的CSS中，那么body就不会滚动回屏幕顶部，所以问题解决了。我们可以使用JavaScript来计算滚动顶部，并将该值添加到body样式中：

// 模态框显示时，我们需要一个固定的body
document.body.style.position = 'fixed';
document.body.style.top = `-${window.scrollY}px`;

// 模态框隐藏时，我们需要保持在滚动位置的顶部
document.body.style.position = '';
document.body.style.top = '';

这有效，但是模态框关闭后仍然存在一点泄漏。具体来说，当模态框打开且body设置为fixed时，页面似乎已经丢失了其滚动位置。因此我们必须检索位置。让我们修改我们的JavaScript来解决这个问题。

// 模态框隐藏时...
const scrollY = document.body.style.top;
document.body.style.position = '';
document.body.style.top = '';
window.scrollTo(0, parseInt(scrollY || '0') * -1);

搞定了！模态框打开时body不再滚动，并且在模态框打开和关闭时都保持滚动位置。万岁！

以上是在模态打开时防止页面滚动的详细内容。更多信息请关注PHP中文网其他相关文章！