モーダルやメニューを表示したとき、背景がスクロールしちゃうとちょっと嫌ですよね？
特にモーダルの中がスクロールする場合なんかは、きちんと対策しておかないとモーダルのスクロールが終わった途端に後ろのコンテンツがスクロールしちゃうこともしばしば、、
今回はそんなことにならないように、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ですが、なるべくコードを理解した上で使いたいですね！
思わぬエラーに悩まされる場合もあるので、、（←コピペばっかりして悩まされまくった人）
お役に立てれば幸いです！
コメント