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

【问题标题】：Can I set overflow: hidden but still show a scrollbar?我可以设置溢出：隐藏但仍然显示滚动条吗？
【发布时间】：2019-06-20 07:36:10
【问题描述】：

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

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

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

【问题讨论】：

标签： html css scrollbar

【解决方案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>

【讨论】：

【解决方案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;
  }
`

【讨论】：

【解决方案3】：

答案是否定的，但是你可以设置'hidden'并创建一个元素来模拟滚动条，但是你为什么要这样做，它只会让用户感到困惑。

【讨论】：