JavaScript - 2022-01-25

ロードアニメーションを表示中、スクロールを禁止する方法

ロードアニメーションが長い時などにスクロールしてしまうと困るので設定しておくと便利です。

function disable_scroll(event) {
  event.preventDefault();
}

if(navigator.userAgent.match(/iPhone|Android.+Mobile/)){
  //SP = true
  document.addEventListener('touchmove',disable_scroll,{ passive: false });
  flag = "SP";
}else{
  //PC = true
  document.addEventListener('mousewheel', disable_scroll, { passive: false });
  flag = "PC";
};

$(window).on('load',function(){
  $(window).scrollTop(0);
  if(flag == "PC"){
    // //PCスクロール禁止解除
    document.removeEventListener('mousewheel', disable_scroll, { passive: false });
  };
  if(flag == "SP"){
    // //SPスクロール禁止解除
    document.removeEventListener('touchmove', disable_scroll, { passive: false });
  }
});
Related Posts

Related Posts

pictureタグを使ってPCとスマホでの画像切り替える方法

2020-02-22

アニメーションがカッコいいWEBサイトまとめ-2019

2019-08-27

脱JQuery!JavaScriptでハンバーガーメニューを実装する(JQueryのサンプルあり)

2020-07-01

脱JQuery!ネイティブのJavaScriptでアコーディオンを実装する【JavaScriptとJQueryのサンプル作りました】

2019-08-16