絶対スクロールさせたくない！！！！

ローディング画面やモーダル画面を出す時は基本的には僕はスクロールさせたくありません。
ローディング画面でスクロール出来てしまうと、ローディング終了後にページの途中から表示されてしまいます。

CSSでスクロールを禁止にする
実はiPhoneでバグが出る
なぜiosで効かないのか？？

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でも構いません。