BootstrapのModalでページTOPにスクロールしちゃう時の解決法
WEB系プログラマはみんな大好きBootstrap。その中でもModalの存在は結構大きいですよね。昔まではわざわざページ遷移して表示させていたような内容も、Bootstrapを使えば簡単にModalで表示させることが出来るからめんどくささが激減!
ただ、なぜか原因は分からないけど下に画面をスクロールしていってからModalを起動すると、勝手にスクロールが一番上に戻ってModalが表示される現象が起こる時がありませんか??
これはかなりユーザビリティが下がっちゃいます…
ちなみにBootstrapのv3.1.1で起こりました。
プログラミングやWordPressを習得するのに一番近道な方法とは?
いろいろググった結果…バグ?
なんとかしたいといろいろググってみたところ、やはりこの現象に遭遇している人は一定数いるようですが、全部海外のコミュニティで且つ結構情報が少ない…。
苦手な英語ですが、なんとか頑張って読んでいるとどうやらバグらしい?
でもあまりハッキリしない。
取り急ぎ、挙がっている解決法を何個か試しましたが一向に直らない…
でもこの現象ほんと使いづらくなるから諦めない!と色々試した結果。。。
直った!!
困っている人はこのCSSを入れてみて!
1 2 3 4 | .modal-open { overflow: visible!important; position: static!important; } |
!importantは入れなくても良いけど、読み込む順番でね変わってくるから念のため。基本的に入れないほうが良いよ!
どう?これで直るかな?
peiはこれでバッチリ直りました。
スクロールが上に戻っちゃったら嫌だもんね。
すごい小ネタですが、誰かの役に立てれば嬉しいです。