如何設置溢出：隱藏但仍使滾動條可見？

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 }; 
 
})();

爲您打開模式與此代碼，你可以只想儘快鎖定滾動位置。