如何设置溢出：隐藏但仍使滚动条可见？

Question

当显示模态时，我会将一个带有overflow: hodden的类添加到body标签。所以模式背后的内容不会滚动。一切都很好。

但

如果原来的页面是足够大，有一个滚动条，然后我可以看到页面的丑陋右移，当我打开模式。我找出了这种行为的原因。 Overflow: hidden会导致滚动条消失，所以这就是为什么它向右移动约10px。

我的问题是如何解决这个问题。实际上，我需要应用overflow:hidden，但仍然显示滚动条。

Answer 1

(function() { 
 
\t let _scrollPosition; 
 

 
\t function preventScroll(e) { 
 
\t \t e.preventDefault(); 
 
\t \t window.scroll(..._scrollPosition); 
 
\t } 
 

 
\t function lock() { 
 
\t \t _scrollPosition = [window.pageXOffset, window.pageYOffset]; 
 
\t \t $(window).on('scroll touchmove', preventScroll); 
 
\t } 
 

 
\t function unlock() { 
 
\t \t $(window).off('scroll touchmove', preventScroll); 
 
\t } 
 

 
\t return { 
 
\t \t lock, 
 
\t \t unlock 
 
\t }; 
 
})();

为您打开模式与此代码，你可以只想尽快锁定滚动位置。