【JQuery】モーダルやメニューを開いたときに下をスクロールさせない

モーダルやメニューを開いたときにつられて下の要素までスクロールしないようにします。

何もしないと↓になります。

See the Pen
modal_scroll2 by kurosu haruka (@skysound98)
on CodePen.

メニューを開いて勢いよくスクロールすると下の青い要素までスクロールしてしまったり、赤い要素をスクロールしたいのに青い要素が動いてしまったりします。

それを解消したのが↓です。
今回はJQueryを使用していますが、javascriptだけでも可能です。

See the Pen
by kurosu haruka (@skysound98)
on CodePen.

赤い要素を開くと同時にそれ以外のすべてをスクロールしないようにしています。

$('body').toggleClass('stop');でbodyに見えている部分以外は隠す、つまり見えていない要素があってもスクロールさせないoverflow:hidden;を持ったクラスを付与しています。

そのうえで.modal(赤い要素)にはoverflow-y: auto;(縦方向にはみ出していたらスクロールバーを付ける)を設定しているので赤い要素はスクロールができます。

こうしておくことで、モーダルやメニューを画面いっぱいに開いた後に気づかないうちに下の要素も移動していた、ということがなくなります。

また、下の要素の途中でも柔軟に止まってくれます。

ただ、この方法を取るには赤い要素に高さ(今回は