2019年06月18日(火)

モーダルを開いている時にページがスクロールしてしまうのを防ぐCSSとJavaScriptのテクニック

• 0
• 50
• 220
• 281

ページ上でモーダルを開き、スクロールして、モーダルを閉じると、通常そのページはモーダルを開いた時とは別の場所にスクロールされた状態で表示されてしまいます。そして、スクロールした状態で、モーダルを開いて閉じると、一番上にスクロールされた状態で表示されてしまいます。
これらを解決するCSSとJavaScriptのテクニックを紹介します。

Prevent Page Scrolling When a Modal is Open

下記は各ポイントを意訳したものです。
※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。

はじめに

モーダルを開いて、スクロールして、モーダルを閉じます。すると、そのページはモーダルを開いた時とは別の場所にスクロールされた状態で表示されています。

下記のデモで試してみてください。