jQueryを利用して、Webブラウザーのスクロール量を取得する - jQuery

jQueryを利用して、ウェブブラウザのスクロール量を取得するコードを紹介します。

概要

jQueryでスクロール量を取得する場合は以下のメソッドを利用します。

$(this).scrollTop()

$(this).scrollLeft()

プログラム : 縦方向のみの例

コード

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

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
	<meta charset="utf-8" />
  <style type="text/css">
    <!--
    .FloatInfo {
      position: fixed;
      top: 16px;
      right: 16px;
      width: 240px;
      height: 60px;
      background-color: #FFFFFF;
    }
    -->
  </style>

  <script src="jquery-2.2.1.js" type="text/javascript"></script>
  <script type="text/javascript">
    $(function () {
      $(window).on('scroll', function () {
        $("#infoFrame").text("ScrollY:" + $(this).scrollTop());
      });
    });
    </script>
</head>
<body>
  <div id="infoFrame" class="FloatInfo"></div>
  <div>
    <div style="height:120px;background-color:#808080">コンテンツ</div>
    <div style="height:120px;background-color:#D0D0D0">コンテンツ</div>
    <div style="height:120px;background-color:#808080">コンテンツ</div>
    <div style="height:120px;background-color:#D0D0D0">コンテンツ</div>
    <div style="height:120px;background-color:#808080">コンテンツ</div>
    <div style="height:120px;background-color:#D0D0D0">コンテンツ</div>
    <div style="height:120px;background-color:#808080">コンテンツ</div>
    <div style="height:120px;background-color:#D0D0D0">コンテンツ</div>
  </div>

</body>
</html>

解説

DOMツリーが構築された後で処理を開始するため、#(function(){ ... }); 内にコードを記述します。スクロール量の表示は、スクロールがされたタイミングで表示をするため、onscrollイベントハンドラに表示のコードを記述します。jQueryでは on メソッドを利用します。onメソッドの第一引数に'scroll'を第二引数にイベントハンドラの関数を与えることで、スクロールイベントを実装します。
スクロールイベントでは、id="infoFrame"の要素に対して、スクロール量を表示します。

表示結果

上記のHTMLファイルをWebブラウザで表示します。下図の画面が表示されます。

画面をスクロールします。右側の固定エリアに縦方向のスクロール量が表示されます。

逆方向にスクロールし、画面の上部まで戻ると値は0になります。

プログラム : 縦横方向の例

コード

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

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
	<meta charset="utf-8" />
  <style type="text/css">
    <!--
    .FloatInfo {
      position: fixed;
      top: 16px;
      right: 16px;
      width: 240px;
      height: 60px;
      background-color: #FFFFFF;
    }
    -->
  </style>

  <script src="jquery-2.2.1.js" type="text/javascript"></script>
  <script type="text/javascript">
    $(function () {
      $(window).on('scroll', function () {
        $("#infoFrame").html("ScrollX:" + $(this).scrollLeft() +"<br/>"+"ScrollY:" + $(this).scrollTop());
      });
    });
    </script>
</head>
<body>
  <div id="infoFrame" class="FloatInfo"></div>
  <div>
    <div style="height:120px;width:1600px;background-color:#eaeaff">コンテンツ</div>
    <div style="height:120px;width:1600px;background-color:#9ebeee">コンテンツ</div>
    <div style="height:120px;width:1600px;background-color:#eaeaff">コンテンツ</div>
    <div style="height:120px;width:1600px;background-color:#9ebeee">コンテンツ</div>
    <div style="height:120px;width:1600px;background-color:#eaeaff">コンテンツ</div>
    <div style="height:120px;width:1600px;background-color:#9ebeee">コンテンツ</div>
    <div style="height:120px;width:1600px;background-color:#eaeaff">コンテンツ</div>
    <div style="height:120px;width:1600px;background-color:#9ebeee">コンテンツ</div>
  </div>
</body>
</html>