Question

我想在弹出窗口时禁用滚动，但是我讨厌在添加/删除滚动条时整个页面的大小改变。有没有一种方法可以在不隐藏滚动条的情况下禁用滚动？

当您将overflow：scroll设置为没有足够内容滚动的元素时，有点像：它仍然显示滚动条，但是已被禁用。

//when popup is open, disable scroll on body
body.popupOpen {
    overflow: hidden;
}

Answer 1

确保溢出（滚动条）在body元素上，然后添加一个覆盖层，该覆盖层将在显示弹出窗口时简单地覆盖主体及其滚动条。

这是一个简化的示例，其中只有无法滚动的叠加层：

body {
  overflow: auto;
  margin: 0;
  max-height: 100vh; /* no more than the height of the viewport*/
}

html {
  overflow: hidden; /* This one is important to avoid the propagation */
}

.overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
}

.content {
  min-height: 500vh;
}

<div class="overlay">

</div>
<div class="content">
</div>

Answer 2

您可以创建一个使整个页面视图完整的div，并使其透明，这样，您就可以启用/禁用div滚动来维护滚动条：

.theDivInactive { 
   background: none;
   pointer_events: none;
   width: 100vw;
   height: 100vh;
   overflow: hidden;
  }

and switch the class when the popup is on the screen:

  .theDivActive { 
   background: none;
   pointer_events: none;
   width: 100vw;
   height: 100vh;
   overflow: scroll;
  }
`

Answer 3

答案是否定的，但是您可以设置“隐藏”并创建一个元素来模拟滚动条，但是为什么要这样做，只会使用户感到困惑。

我可以设置溢出：隐藏但仍显示滚动条吗？

3 个答案: