オーバーフローを設定する方法：非表示にしてもスクロールバーを表示させますか？

Question

モダールが表示されている場合、bodyタグにoverflow: hoddenのクラスを追加します。したがって、モーダルの背後にあるコンテンツはスクロールしません。すべてが良いです。

しかし

元のページがスクロールバーを持ってするのに十分な大きさであるならば、私は、モーダルを開くと、私は、右ページの醜いシフトを見ることができます。私はそのような行動の理由を見つけます。 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 }; 
 
})();

あなたはできるだけ早くあなたがこのコードでモーダルを開くとスクロール位置をロックすることができます。