禁用滚动但保留滚动条 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 中删除该类。