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

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

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.