javascript - 如何在顶部显示导航栏的弹出窗口时保留和禁用 y 滚动条

Question

如图 this笔，我想在保留对导航栏的访问权限的同时制作一个弹出窗口(这就是我不使用 Bootstrap 的模式的原因)。问题是我想一直保持滚动条，但也想在弹出窗口处于事件状态时禁用背景滚动。

到目前为止，我尝试了很多东西，几乎唯一值得一提的是将 overflow: hidden 设置为正文(以删除滚动条并防止滚动)并强制滚动条在 .popup，但这并没有考虑导航栏，它仍然会跳动。

我唯一还没有尝试过的是在原来的弹出窗口中包含一个相同的导航栏。但对我来说这是自找麻烦，还有别的办法吗？

如果知道如何计算滚动条的宽度，或者更具体地说，知道是否有滚动条或滚动条是隐藏的(就像在 OS X 中一样)，那么这将不是问题。 This技术似乎可靠。

我知道之前已经回答过类似的问题，但我没能找到针对这种特定情况的解决方案。

Answer 1

因为导航栏位于弹出窗口之上，所以它隐藏了滚动条。解决方案是简单地将导航栏从右边缘移开以考虑滚动条，通过使用问题中提到的方法测量的宽度。

.popup-open .navbar {
  right: 15px;
}