スクロールバーを表示したままスクロールを無効にするにはどうすればよいですか?

スクロールを無効化しながらスクロールバーの表示を維持する

overflow: hidden を使用してスクロールバーを非表示にすることは可能ですが、この方法では Web サイトに視覚的な変化が生じる可能性があります。 。視認性を損なうことなくスクロールを無効にしたい場合の方法は次のとおりです:

ページ位置の固定:

オーバーレイの下のページを上部に固定できる場合は、オーバーレイを開くときに次の CSS を実行します:

これにより、スクロールバーの表示は維持されますが、コンテンツのスクロールは妨げられます。オーバーレイを閉じたときにスクロールを復元するには、次の CSS を使用します:

スクロール位置を保持:

ページが事前にスクロールされている場合は、 document.documentElement.scrollTop を取得します。 JavaScriptを使用して。この値を body 要素の最上位プロパティとして動的に割り当てます。これにより、オーバーレイの継続時間全体にわたって現在のスクロール位置が維持されます。

CSS:

JS:

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