小程序显示弹窗时禁止下层的内容滚动的两种方法介绍

发布时间：2023-05-18 21:21:02

在小程序开发中，可能会遇到需要弹出窗口的场景，如果不对页面进行处理，下层内容的滚动可能会影响用户体验。本篇文章将介绍两种方法来解决这个问题。

方法一：使用CSS样式overflow:hidden

在弹窗弹出的时候，我们可以使用CSS样式overflow:hidden来隐藏body或其他需要禁止滚动的HTML元素的滚动条。这个方法的实现很简单，只需要在弹出窗口的过程中给需要禁止滚动的元素添加样式即可。具体实现方式如下：

<body>
  <!-- 页面主要内容 -->
  <div class="content">
    ...
  </div>
  <!-- 弹出窗口 -->
  <div class="popup">
    ...
  </div>
</body>

/* 默认样式 */
body {
  overflow-y: auto; /* 竖直滚动条自动 */
}
/* 弹出窗口显示时的样式 */
.popup-show {
  overflow: hidden; /* 隐藏滚动条 */
}

在弹出窗口显示时，我们可以通过JS代码将弹出框所在的元素添加上.popup-show的样式：

const popup = document.querySelector('.popup');
popup.classList.add('popup-show');

当弹窗关闭时，移除该样式即可：

popup.classList.remove('popup-show');

这种方法简单易行，但可能会在弹出窗口上滑时出现闪烁的问题。该方法只是隐藏了滚动条而不是真正地禁止滚动。

方法二：使用JS控制滚动条

另外一种方法是通过JS代码来控制滚动条，当弹出窗口显示时，我们通过以下方式来将页面滑到顶部，并记录当前页面的滚动位置：

const scrollY = window.pageYOffset; // 记录当前滚动位置
window.scrollTo(0, 0); // 滑动到顶部
document.body.style.position = 'fixed'; // 固定body元素
document.body.style.top = -scrollY + 'px'; // 记录当前滚动位置

当弹窗关闭时，我们通过以下方式将滚动条回到原来的位置：

document.body.style.position = ''; // 移除fixed属性
document.body.style.top = ''; // 移除top属性
window.scrollTo(0, scrollY); // 将页面滚动到记录的位置

这种方法可以禁止滚动，同时也不会出现闪烁的问题。不过也需要注意，在使用该方法时，如果页面的高度不是固定的（例如页面中有可变高度的元素，如图片、文字等），则需要在弹出窗口时重新计算滚动位置，否则可能会出现滑动异常的情况。

总结

这两种方法各有优缺点，视具体情况选择。种方法简单易行，但可能会闪烁；第二种方法可以避免闪烁，但需要计算滚动位置，使用起来会稍微有一些复杂。在实际应用中根据具体情况选择并实现即可。