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

Question

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

有点像当你设置 overflow:scroll 到一个没有足够内容滚动的元素：它仍然显示滚动条但它被禁用了。

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

标签： htmlcssscrollbar

Answer 1

确保溢出（滚动条）在 body 元素上，然后添加一个覆盖层，当显示弹出窗口时，它将简单地覆盖 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>