モーダルを表示したときにスクロールを制限すると、スクロールバーが悪さをする
モーダル出現時にスクロールを制限すると、クラシックスクロールバーが消えたぶん全体的に左右に表示が崩れてしまい、いまいちな見た目になってしまいます。
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.