返回

弹层出现页面晃动？罪魁祸首竟是overflow:hidden

前端

overflow:hidden引起的页面晃动问题是网页开发中经常遇到的问题之一。当我们在实现页面弹层时，弹层后面一般都会有一个黑色半透明的全屏遮罩层，通常会对这个遮罩元素设置position:fixed定位。在网页出现滚动条且遮罩层出现时，滚动鼠标会发现遮罩层后面的网页是可以滚动的，这可能会导致用户的注意力从弹层转移到其背后的网页上，造成不好的用户体验。

要解决这个问题，我们可以使用一些方法：

  1. 使用overflow:hidden属性。在遮罩层的外层容器上设置overflow:hidden属性，这样可以阻止遮罩层后面的网页滚动。如下所示：
<div id="mask">
  <div id="popup">
    ...
  </div>
</div>

<style>
#mask {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  overflow: hidden;
}
</style>
  1. 使用position:absolute属性。在遮罩层上设置position:absolute属性，并将其top、left、right和bottom属性设置为0。如下所示：
<div id="mask">
  <div id="popup">
    ...
  </div>
</div>

<style>
#mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
}

#popup {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
</style>
  1. 使用body和html元素。我们可以使用body和html元素来阻止遮罩层后面的网页滚动。如下所示：
<body style="overflow: hidden;">

<div id="mask">
  <div id="popup">
    ...
  </div>
</div>
</body>
  1. 使用JavaScript。我们可以使用JavaScript来阻止遮罩层后面的网页滚动。如下所示：
document.body.style.overflow = 'hidden';

以上四种方法都可以解决overflow:hidden引起的页面晃动问题。选择哪种方法取决于您的具体需求。