スクロールバーを非表示にせずにスクロールバーのスクロールを防ぐにはどうすればよいですか?

非表示にせずにスクロールバーのスクロールを防止する

ライトボックスを実装する際の一般的な課題は、親ページのスクロールバーを非表示にせずに一時的に無効にする必要があることです。オーバーフロー: 非表示;。この解決策では、望ましくないジャンプやスペース占有が発生する可能性があります。

ありがたいことに、スクロールバーを表示しながら無効にする実行可能なアプローチがあります。オーバーレイの下の要素の固定位置を利用することで、この効果を実現できます。オーバーレイがアクティブになったら、次のスタイルを本文に適用します:

body {
    position: fixed;
    overflow-y: scroll;
}

これにより、スクロールバーが表示されますが、その機能は無効になります。オーバーレイを閉じたときにこの変更を元に戻すには、単に元のスタイルを復元します。

body {
    position: static;
    overflow-y: auto;
}

ページがすでにスクロールされている場合は、JavaScript を介して現在のスクロール位置をキャプチャし、それをbody 要素は、オーバーレイがアクティブ化されたときにページが現在のスクロール位置に留まるようにします。これは、次の CSS と JS で実現できます。

.noscroll {
    position: fixed;
    top: var(--st, 0);
    inline-size: 100%;
    overflow-y: scroll;
}

const b = document.body;
b.style.setProperty('--st', -(document.documentElement.scrollTop) + "px");
b.classList.add('noscroll');

このアプローチを実装すると、スクロールバーを非表示にすることなく効果的に無効にし、ライトボックスと親ページの両方に必要な機能を維持できます。

以上がスクロールバーを非表示にせずにスクロールバーのスクロールを防ぐにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。