iPentec.com / Document / カテゴリ: JavaScript / タグ: JavaScript

Webページでスクロールを禁止する

概要

スクロールができるWebページでスクロールを禁止させたい場合があります。スクロールを禁止する方法はいくつかありますが、この記事では、マウスホイールのブロック、タッチによる操作のブロック、カーソルキーのブロック、スクロールバーの非表示をしてスクロールを禁止する方法を紹介します。

補足

ページをスクロールできなくする方法にはこの記事で紹介する方法以外にCSSの Positionプロパティを利用する方法もあります。
Positionプロパティを利用する方法はこちらの記事を参照してください。

実装例

コード

下記のHTMLファイルを作成します。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title></title>
  <script type="text/javascript">
    function LockScroll() {
      document.addEventListener("mousewheel", handleMouseWheel, { passive: false });
      document.addEventListener("touchmove", handleTouchMove, { passive: false });
      document.addEventListener("keydown", handleKeyDown, { passive: false });
      document.body.style.overflow = "hidden";
    }

    function UnLockScroll() {
      document.removeEventListener("mousewheel", handleMouseWheel, { passive: false });
      document.removeEventListener("touchmove", handleTouchMove, { passive: false });
      document.removeEventListener("keydown", handleKeyDown, { passive: false });
      document.body.style.overflow = "visible";
    }

    function handleMouseWheel(e) {
      e.preventDefault();
    }
    function handleTouchMove(e) {
      e.preventDefault();
    }
    function handleKeyDown(e) {
      switch (e.keyCode) {
        case 0x25:
        case 0x26:
        case 0x27:
        case 0x28:
          e.preventDefault();
          break;
      }
    }

  </script>
  <style>
    #frame1 {
      height: 120px;
      border: 1px solid #ff0000;
    }

    #frame2 {
      height: 120px;
      border: 1px solid #ff6a00;
    }

    #frame3 {
      height: 120px;
      border: 1px solid #ffd800;
    }

    #frame4 {
      height: 120px;
      border: 1px solid #4cff00;
    }

    #frame5 {
      height: 120px;
      border: 1px solid #00ffff;
    }

    #frame6 {
      height: 120px;
      border: 1px solid #0094ff;
    }

    #frame7 {
      height: 120px;
      border: 1px solid #4800ff;
    }

    #frame8 {
      height: 120px;
      border: 1px solid #b200ff;
    }

    #frame9 {
      height: 120px;
      border: 1px solid #ff00dc;
    }

    #frame10 {
      height: 120px;
      border: 1px solid #000000;
    }
  </style>
</head>
<body>
  <p><a href="javascript:LockScroll();">スクロールをロック</a></p>
  <p><a href="javascript:UnLockScroll();">スクロールをアンロック</a></p>
  <div id="frame1">枠1</div>
  <div id="frame2">枠2</div>
  <div id="frame3">枠3</div>
  <div id="frame4">枠4</div>
  <div id="frame5">枠5</div>
  <div id="frame6">枠6</div>
  <div id="frame7">枠7</div>
  <div id="frame8">枠8</div>
  <div id="frame9">枠9</div>
  <div id="frame10">枠10</div>
</body>
</html>

解説

[スクロールをロック]のリンクをクリックすると、下記のJavaScript関数を実行します。

  function LockScroll() {
    document.addEventListener("mousewheel", handleMouseWheel, { passive: false });
    document.addEventListener("touchmove", handleTouchMove, { passive: false });
    document.addEventListener("keydown", handleKeyDown, { passive: false });
    document.body.style.overflow = "hidden";
  }

下記の行でマウスのホイルによるスクロールをブロックします。addEventListenerメソッドでmousewheelイベントのイベントリスナを追加しています。イベントリスナでは、prevnetDefault()メソッドを呼び出し、デフォルトの処理をブロックします。

  document.addEventListener("mousewheel", handleMouseWheel, { passive: false });

function handleMouseWheel(e) {
  e.preventDefault();
}

続いての下記の行で、タッチによるスクロールをブロックします。addEventListenerメソッドでtouchmoveイベントのイベントリスナを追加しています。イベントリスナでは、先のマウスホイールの処理と同様にprevnetDefault()メソッドを呼び出し、デフォルトの処理をブロックします。

  document.addEventListener("touchmove", handleTouchMove, { passive: false });

function handleTouchMove(e) {
  e.preventDefault();
}

下記の行でキーボードのカーソルキーによるスクロールをブロックします。addEventListenerメソッドでkeydownイベントのイベントリスナを追加しています。イベントリスナでは、キーコードを判別し、押されたキーがカーソルキーであった場合、prevnetDefault()メソッドを呼び出し、デフォルトの処理をブロックします。

  document.addEventListener("keydown", handleKeyDown, { passive: false });

  function handleKeyDown(e) {
    switch (e.keyCode) {
      case 0x25:
      case 0x26:
      case 0x27:
      case 0x28:
        e.preventDefault();
        break;
    }
  }

上記3つの処理を実行しても、ウィンドウのスクロールバーをマウスで操作すると画面をスクロールできてしまいます。この操作を防ぐためにスクロールバーを非表示にします。

    document.body.style.overflow = "hidden";

なお、[スクロールをアンロック]のリンクがクリックされた場合は、下記のJavaScriptを実行します。 addEventListenerで追加したイベントリスナを削除し、スクロールバーの表示を戻すことで、スクロールができるようになります。

function UnLockScroll() {
  document.removeEventListener("mousewheel", handleMouseWheel, { passive: false });
  document.removeEventListener("touchmove", handleTouchMove, { passive: false });
  document.removeEventListener("keydown", handleKeyDown, { passive: false });
  document.body.style.overflow = "visible";
}