禁用滚动但保留滚动条CSS

Question

我找不到解决方案，这里有一个问题，但答案不是很有用（至少对我而言）。

我有一个JavaScript模式弹出窗口，通过在页面上放置透明div来禁用背景上的所有内容。它还通过将溢出设置为隐藏来禁用滚动，并且必须这样做，因为页面可以使用鼠标滚轮滚动，否则会分散用户的注意力。

问题是，当隐藏和显示滚动条时，页面会调整大小并且效果很难看。此外，我的页面设计的方式是，如果我停止调整大小，那也是丑陋的。

我想要的是禁用滚动条，但保持可见（页面内容长于屏幕适合）。这在CSS中是否可行？

Answer 1

而不是更改css，这将删除scrollbar，而如您所说更改页面布局，请尝试调用jquery function。

// call your pop up and inside that function add below
$('body').on('scroll mousewheel touchmove', function(e) {
      e.preventDefault();
      e.stopPropagation();
      return false;
});

然后当您关闭模态时，调用相同的函数，但将on替换为off

Answer 2

一旦开始显示弹出窗口，请为body提供一个类（如popupOpen）。这应该是一个简单的解决方法。

.popupOpen {
    overflow: hidden;
    margin-right: 17px //size of the scrollbar in each browser
}

关闭弹出窗口时，只需从body中删除该类即可。