iPentec.com / Doc / CSS

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

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

概要

こちらの記事では、スクロールやタッチ、キーダウンイベントをキャンセルすることでスクロールできないようにする方法を紹介しました。この記事では別の方法として、CSSのPositionプロパティを利用してページをスクロールできないようにする方法を紹介します。

方法

CSSでbodyのスタイルを position:fixed に設定し、top bottom left right の値を0にすることでWebブラウザのビューポートのサイズをコンテンツのサイズに設定することでスクロールできない状態にします。

例

コード

下記の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 {
      position: fixed;
      left: 0px;
      right: 0px;
      top: 0px;
      bottom:0px;
    }
    #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>
  <p><a href="javascript:ScrollLock();">スクロールのロック</a></p>
  <p><a href="javascript:ScrollUnlock();">スクロールのアンロック</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>

解説

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

    body.scroll-lock {
      position: fixed;
      left: 0px;
      right: 0px;
      top: 0px;
      bottom:0px;
    }

リンクをクリックにより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");
      }
    }