3
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

モーダルを表示したときの表示崩れを防止

Posted at

モーダルを表示したときにスクロールを制限すると、スクロールバーが悪さをする

モーダル出現時にスクロールを制限すると、クラシックスクロールバーが消えたぶん全体的に左右に表示が崩れてしまい、いまいちな見た目になってしまいます。

css と jQuery を用いた方法

色々試した結果、javascript(jQuery)とcssで対策するのがいちばん楽なのではないでしょうか。
よく紹介されている scrollbar-gutter: stable; を用いたやり方もスマートだとは思うんですが、

  • body を基準とした position: fixed; や position: absolute; を当てた要素が崩れる(対策はあるが、css が煩雑になってしまう)
  • Safari に対応していない

などの理由から、考慮するべきことが多いなと感じます。

ここではスクロールバーを消さずにスクロールのみを制御する方法を紹介します。

どうやって実現するか

  • CSS
    • モーダル出現時に body に position: fixed; を設定
    • このままではスクロールバーが消えるので、 overflow-y: scroll; を設置してスクロールバーを出現させたままにする
  • javascript(jQuery)
    • モーダル出現時のスクロール位置を取得して、body に設定された position: fixed; の位置を調整する(見た目スクロールしているように見える)
    • モーダルを閉じたときに body の position を デフォルトに戻し、位置をもとに戻す
    • スクロール位置をモーダルを開いたときの位置に戻す

See the Pen Untitled by junichi sugihara (@weboscar1164) on CodePen.

3
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?