Home
CSS
JavaScriptでサイトのスクロールを無効にする方法

JavaScriptでサイトのスクロールを無効にする方法

JavaScriptでサイトのスクロールを無効にする方法

どうも!かけちまるです!

サイトのスクロールを一時的に無効にしたいことがあると思います。
例えば、モーダルウィンドウが開いている時や、OPアニメーション後に必ずメインビジュアルを見せたい時などにこれから紹介するスクロールを無効にする方法が使えると思います。

この記事では、

  • ・実はCSSでも実現可能なこと
  • ・JavaScriptでスクロールを無効にする方法

がわかります。

実はCSSでも実現可能だがしかし・・・

実はCSSで簡単に実装する方法もあるのですが色々弊害があるのです。
具体的には、htmlbody要素にoverflow: hidden;を指定するだけです。

そんでもって弊害というのが、

  • ・iOSでは動作しない
  • ・結局スクロールする&させないを切り分けるのはJavaScriptである
  • ・CSSの指定の仕方によっては挙動がおかしくなる

の3つなのでこの記事に書いてあるJavaScriptでスクロールを無効にする方法をマスターすることをオススメします。

JavaScriptでスクロールを無効にする

この記事ではボタンをクリックすることによってスクロールを無効&有効を切り替れるようにしていきます。

実装例はこちらです。

JavaScriptの解説

何をしているか簡単に説明すると、id=”off”id=”on”をそれぞれクリックした時にtouchmoveイベントとwheelイベントを実行したり削除したりしています。

JavaScript
コピー
function noscroll(e){ e.preventDefault(); } $('#off').on('click', function(){ document.addEventListener('touchmove', noscroll, {passive: false}); document.addEventListener('wheel', noscroll, {passive: false}); }); $('#on').on('click', function(){ document.removeEventListener('touchmove', noscroll); document.removeEventListener('wheel', noscroll); });
イベントリスナーの説明
  • touchmove・・・1つ以上のタッチポイントが移動した時(スマホでスクロールした時)
  • wheel・・・マウスやタッチパッドでスクロールした時
その他の説明
  • e.preventDefault();・・・イベントのデフォルト動作を無効にすることができます。
  • passive: false・・・これを指定しないと一部のイベントでe.preventDefault();がうまく動作しない。

5行目 | id=”off”をクリックした時

addEventListenerの第一引数でtouchmoveイベントとwheelイベントを登録します。
addEventListenerの第二引数で1行目のnoscroll関数を呼び出しe.preventDefault();でイベントの動作を無効にします。
addEventListenerの第三引数はpassive: false指定してe.preventDefault();が正常に動作するようにしています。

10行目 | id=”on”をクリックした時

removeEventListenertouchmoveイベントとwheelイベントを登録を解除しています。

おわり

かけちまる
かけちまる
Webエンジニアをしています。
HTML/CSS/JavaScript/jQuery/PHPができます。
WEB制作を中心に日々学びになったこと、興味が沸いたことについて初心者の方でもわかりやすいようにアウトプットしていくブログです。

関連記事

【Contact Form 7】ログインユーザーのためにselectのデフォルト値を設定する

【Contact Form 7】ログインユーザーのためにselectのデフォルト値を設定する

jQueryでURLやパラメータを取得する方法【location】

jQueryでURLやパラメータを取得する方法【location】

Contact Form7の入力エラー表示をCSSのみでカスタマイズ

Contact Form7の入力エラー表示をCSSのみでカスタマイズ

Contact form 7「サイトのドメインに属していないメールアドレスが送信元に設定されています」の理由と対処法

Contact form 7「サイトのドメインに属していないメールアドレスが送信元に設定されています」の理由と対処法

【セキュリティ対策】WP Cerber Securityの設定方法

【セキュリティ対策】WP Cerber Securityの設定方法

Ajaxを使用したheaderとfooterの共通化【JavaScript】

Ajaxを使用したheaderとfooterの共通化【JavaScript】