ボディスクロールバーを非表示にせずに無効にする方法

可視性を維持しながら HTML/本文スクロールバーを無効にする

最適なライトボックス エクスペリエンスを実現するには、親要素のスクロールバーを非表示にせずに一時的に無効にすることができます。それ。これを実現するには、次のアプローチを検討してください:

親要素を修正:

ライトボックスを開くときに、オーバーレイの基礎となるページに次の CSS プロパティを割り当てます:

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

これにより、スクロールバーの表示を維持しながら、ページの位置が固定され、垂直スクロールがページ自体に制限されます。

ライトボックスを閉じるときにリセット:

ライトボックスを閉じると、元の CSS プロパティが復元されます:

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

既存の処理スクロール:

ページの現在のスクロール位置を保存するには、ライトボックスを開く前に JavaScript を使用してドキュメントのscrollTop 値を取得し、それを body 要素の先頭プロパティとして割り当てます:

.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 サイトの他の関連記事を参照してください。