ローディング画面やモーダル画面を出す時は基本的には僕はスクロールさせたくありません。
ローディング画面でスクロール出来てしまうと、ローディング終了後にページの途中から表示されてしまいます。
CSSでスクロールを禁止にする
スクロール制御で有名CSSがありますね。
overflow: hidden;
です。
このCSSを設定する事で、基本的にはスクロールが禁止にされます。
overflow-xは横軸方向にスクロールを禁止。
overflow-yは縦軸方向にスクロールを禁止。
overflowは全方向のスクロール禁止になります。
overflow: hidden;
を初期値に設定しておき、ローディング終了後にjsから外す。
割と簡単に思いつく常套手段です。
この対応でPC&アンドロイドなどの主要ブラウザではスクロールを禁止させる事が可能です。
しかし・・・
実はiPhoneでバグが出る
overflow: hidden;
はiPhoneではスクロール禁止を制御出来ないんです。
これで結構ハマる人めちゃくちゃ多いです。
私も忘れてしまうとめちゃくちゃはまります。
では実際のコードです。
<!--ブラウザスクロール禁止-->
<html style="overflow: hidden;">
<body style="overflow: hidden;">
</body>
</html>
// 初期値 iosスクロール禁止
var move = function( event ){
event.preventDefault();
}
// スクロール停止の処理
window.addEventListener( 'touchmove' , <meta charset="utf-8">move , { passive: false } );
//---ここまでios
// iosスクロール許可(<meta charset="utf-8">スクロール停止を停止)
window.removeEventListener( 'touchmove' , <meta charset="utf-8">move, { passive: false } );
// ブラウザスクロール許可
$("body").css("overflow", "");
$("html").css("overflow", "");
あまりキレイな書き方じゃないですね。。
簡単に解説します。
HTMLの部分は見たらわかると思いますが、初期値にoverflow: hidden;
を設定します。これはCSSでも構いません。
なぜiosで効かないのか??
そもそもの話、なんでiosで効かないねん!って話ですね。
ブラウザ側にpassiveというオプションが初期値で設定されています。
passiveはtrueの時にpreventDefault(); が含まれていないとスクロールを許可しまいます。
その為overflowが効きません。
なんのこっちゃわからないですよね。
ええ。安心して下さい僕もわかりません。