Web 開発でスクロールバーを非表示にせずに無効にするにはどうすればよいですか?

スクロールバーを非表示にせずに無効にする

Web 開発では、ライトボックスの使用中に親要素のスクロールバーを無効にする必要がある場合があります。ただし、単に overflow: hidden を使用してスクロールバーを非表示にすることは、サイトがジャンプしてスクロールバーがあったスペースを占有する可能性があるため、多くの場合望ましくありません。

スクロールバーを表示したまま無効化できる実行可能な解決策があります。彼ら。ライトボックスの下のページを上部に配置できる場合は、次の CSS コードを利用できます:

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

これにより、スクロールバーが表示されますが、コンテンツはスクロールされなくなります。ライトボックスを閉じた後にスクロールバーを復元するには、次のプロパティを元に戻すだけです:

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

この方法では、スクロール イベントを変更する必要はありません。

既存のスクロール位置のアドレス指定

ライトボックスが開く前にページがすでにスクロールされている場合は、JavaScript を通じて現在のスクロール位置を取得できます。それを body 要素の最上位プロパティとして割り当てます。これにより、ライトボックスの使用中に現在のスクロール位置が維持されます。

CSS

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

JavaScript

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

Byこのソリューションを実装すると、スクロールバーを非表示にすることなく効果的に無効にし、意図した視覚的なプレゼンテーションを維持できます。ウェブページ。

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