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

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

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が効きません。

なんのこっちゃわからないですよね。

ええ。安心して下さい僕もわかりません。

タイトルとURLをコピーしました