モーダル起動時の背景スクロール【iOS】

iOSの際に、メニュー開閉時や、モーダル起動時にメニューやモーダル以外の背景がスクロールしてしまうとかなりイライラするので固定しちゃいます。

基本の対応

htmlやbodyや、全部を囲んでいるdivなどに

overflow:hidden;

で対応可能、「remodal」などのモーダルプラグインでは、自動でクラス追加されて記述されているのでわざわざ書かなくてもいい。

iOSで出た問題【remodal使用時】

「remodal」使用時にiphone実機で確認するとhtmlにoverflow:hidden;が入っているにもかかわらず、効いていない場合がある。

開くときに、bodyにクラス追加してそのクラスに「overflow:hidden;」
閉じるときにクラス削除

で解決するが、わざわざ書くにもめんどくさいので、remodal.jsを編集する

remodal.jsを編集

モーダル開閉時に、htmlに「remodal-is-locked」というクラスが追加されるので、remodal.jsを開いて「is-locked」で検索すると下記の2箇所の「html」を「body」を変更

//function e内に
var a, c, e = b("html"), f = k("is-locked");

//function f内に
var a, c, e = b("html"), f = k("is-locked");

↓ //2個ともbodyに変更

var a, c, e = b("body"), f = k("is-locked");

これで、htmlに追加されていたクラスがbodyに追加されるようになるので、iOSでも背景固定ができる。
当たり前ですが、cdnでjs読んでる場合はローカルに落として変更すること。