Webページでスクロールできないようにする - CSS overflowプロパティを利用 - CSS

CSSを利用して、Webページでスクロールできないようにする方法を紹介します。

概要

こちらの記事では、 CSS Positionプロパティを利用して。スクロールできないようにする方法を紹介しました。
多くの場合では紹介した方法で問題ない場合もありますが、スクロールした状態ではページの上部にスクロールが戻ってしまう場合があります。スクロール位置を変えずに、その位置でスクロールできないようにする方法として、overflow プロパティを利用する方法があります。

書式

  overflow: hidden

コード

以下のHTMLを作成します。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title></title>
  <script type="text/javascript">

    function ScrollLock() {
      elems = document.getElementsByTagName("body");
      for (var item of elems) {
        item.classList.add("scroll-lock");
      }
    }

    function ScrollUnlock() {
      elems = document.getElementsByTagName("body");
      for (var item of elems) {
        item.classList.remove("scroll-lock");
      }
    }

  </script>
  <style>
    body.scroll-lock {
      overflow: hidden;
    }

    #frame1 {
      height: 120px;
      border: 1px solid #000000;
    }

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

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

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

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

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

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

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

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

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

解説

bodyタグに "scroll-lock" クラスが指定された場合に下記のスタイルを適用します。
overflowプロパティにhiddenを設定します。この設定によりビューポートの範囲がコンテンツの大きさとなり、スクロールバーが非表示になりスクロールもできない状態になります。

  body.scroll-lock {
    overflow: hidden;
  }

リンクのクリックによりJavaScriptの関数を呼び出し、bodyタグの要素にscroll-lock クラスを追加します。
[スクロールのロック]リンクをクリックした場合は ScrollLock()関数を呼び出し、bodyタグの要素にscroll-lock クラスを追加します。
[スクロールのアンロック]リンクをクリックした場合は ScrollUnlock()関数を呼び出した場合には、bodyタグの要素のクラスからscroll-lock クラスを削除します。

  <p><a href="javascript:ScrollLock();">スクロールのロック</a></p>
  <p><a href="javascript:ScrollUnlock();">スクロールのアンロック</a></p>

スクロールのロックをするScrollLock()関数では、Bodyタグの要素へのクラスの適用はgetElementsByTagName()メソッドを呼び出しbodyタグの要素を取得します。 getElementsByTagName()メソッドの戻り値は要素のリストで取得されるため、 for ループを利用して取得された複数の要素のclassList オブジェクトに"scroll-lock" クラスを追加します。
スクロールのロックを解除する関数ScrollUnlock()関数も同様の処理をします。クラスの削除はclassList.remove()メソッドを利用します。
要素へのクラスの追加や削除の詳細はこちらの記事を参照してください。

  function ScrollLock() {
    elems = document.getElementsByTagName("body");
    for (var item of elems) {
      item.classList.add("scroll-lock");
    }
  }

  function ScrollUnlock() {
    elems = document.getElementsByTagName("body");
    for (var item of elems) {
      item.classList.remove("scroll-lock");
    }
  }