モーダルやメニューを表示したときに背景をスクロールさせない方法

jQuery
スポンサーリンク

モーダルやメニューを表示したとき、背景がスクロールしちゃうとちょっと嫌ですよね?
特にモーダルの中がスクロールする場合なんかは、きちんと対策しておかないとモーダルのスクロールが終わった途端に後ろのコンテンツがスクロールしちゃうこともしばしば、、

今回はそんなことにならないように、jQueryを使ってスクロールしないようにする方法をご紹介します!

対策をしていない場合

See the Pen
スクロールしちゃう
by cotaluna (@cotaluna)
on CodePen.

なーんにもしていない場合のサンプルです。
「モーダルを表示」を押してモーダルを表示させた後、スクロールしてみてください。
当たり前のようにスクロールしちゃいます。

一番簡単な方法で対策する場合

See the Pen
スクロールさせないその1
by cotaluna (@cotaluna)
on CodePen.

jQueryで、ボタンをクリックした時の処理で、全体を囲む要素に「position: fixed」を設定しています。
一番わかりやすくて簡単な方法ですね。
でも、この方法だとボタンを押した瞬間にページの一番上でピタッと固定されてしまいます。
試しに、下の方にある「モーダル表示すると上に戻っちゃいます」というボタンを押してみてください。

…戻っちゃいますね。これではユーザーがびっくりしちゃうし、何よりとっても使いづらいです。
ページの一番上のボタンならこれでもいいかもしれませんね。

きちっと対策する場合

See the Pen
スクロールさせないその2
by cotaluna (@cotaluna)
on CodePen.

jQueryを見てくださいね。
5行目で、現在のスクロール値を「posi」という変数に格納して、6行目〜でその数値をtopに設定します。
こうすることで、背景の位置を変えることなく固定することができます!

モーダルを消すときには、styleを解除してスクロール値も元に戻してあげます(14行目・15行目)。

モーダルの中をスクロールさせたい場合は、全体を囲む要素(サンプルではdata-modal=”fixed”)とモーダルを親子関係にしないよう注意してくださいね。

おわり

いかがでしょうか?
よくわからない場合はとりあえずコピペでもOKですが、なるべくコードを理解した上で使いたいですね!
思わぬエラーに悩まされる場合もあるので、、(←コピペばっかりして悩まされまくった人)

お役に立てれば幸いです!

参考:https://qiita.com/gonshi_com/items/5a86fc415dcccfb04e2a

コメント