iPentec.com  /  Doc  /  JavaScript

目次

スクロール量の取得 - JavaScript でどのくらいスクロールしたかを取得する - JavaScript

JavaScriptでのスクロール量を取得するコードを紹介します。

概要

ブラウザの画面上でクリックした座標を取得したい場合などで、ブラウザの画面が、どのくらいスクロールしたかを取得するコードを紹介します。

補足：ブラウザによる挙動の違い

スクロール量の取得は、Internet Explorer, Mozilla Firefoxと、Google Chrome, Micorosft Edge などのWebkit系/準拠のブラウザではコードが異なります。jQueryを利用するとブラウザの違いの場合分けが不要になります。jQueryでのスクロール量の取得はこちらの記事を参照してください。
最新のWebブラウザでは仕様の統一が進み、多くのブラウザで共通のコードで動作する状況になっています。

プログラム : 最新の主要なブラウザで動作

コード

下記のHTMLファイルを記述します。
ScrollPosition.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 type="text/javascript">
    function onScroll() {
      var infoF = document.getElementById("infoFrame");
      infoF.innerHTML = "ScrollY:" + document.documentElement.scrollTop;
    }

    window.onscroll = onScroll;
  </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>

解説

WindowのonscrollイベントにonScroll関数を割り当てています。画面がスクロールするごとに、onScroll()関数が実行されます。onScroll()関数中ではdocument.documentElement.scrollTopでY方向のスクロール量を取得します。取得した数値は、id="infoFrame"の枠に"ScrollY:"の文字列とともに表示します。infoFrame枠はスクロールで画面がいにスクロールアウトしないようにfixedスタイルでスクロールしないように設定してあります。

表示結果:Internet Explorer

Internet Explorer で上記のHTMLファイルを表示します。下図の画面が表示されます。


下方向にスクロールします。ScrollYの値が増加します。


ページの最初までスクロールで戻るとScrollYの値は0になります。

表示結果:Mozilla FireFox

FireFoxで上記のHTMLファイルを表示します。下図の画面が表示されます。


下方向にスクロールします。ScrollYの値が増加します。


ページの最初に戻るとScrollY の値は0になります。

表示結果：Google Chrome

Google Chromeで上記のHTMLファイルを表示します。下図の画面が表示されます。


下方向にスクロールします。ScrollYの値が増加します。


ページの最初に戻るとScrollY の値は0になります。

表示結果：Google Chrome (バージョン 61 以前)

バージョンの古いChromeでは、正しく動作しません。
Google Chromeで上記のHTMLファイルを表示します。下図の画面が表示されます。


下方向にスクロールしますが、ScrollYの値は0のままです。



横方向のスクロール量の取得

横方向のスクロール量を取得する場合は、scrollLeft プロパティの値を利用します。ただし、先の場合と同様に、Internet Explorer, Firefoxはdocument.documentElementのscrollLeftプロパティを取得し、古いGoogle Chrome, Micorosft Edgeはdocument.bodyのscrollLeftプロパティを取得する必要があります。

コード

下記のコードを記述します。
<!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 type="text/javascript">
    function onScroll() {
      var infoF = document.getElementById("infoFrame");
      infoF.innerHTML = "ScrollX:" + document.documentElement.scrollLeft + "<br/>"
       + "ScrollY:" + document.documentElement.scrollTop;
    }

    window.onscroll = onScroll;
  </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>

解説

先のコードとほぼ同様です。スクロール時に、Y方向のスクロール量をscrollTopプロパティで取得し、X方向のスクロール量をscrollLeftで取得し、infoFrameに表示します。

表示結果:Internet Explorer

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


右方向にスクロールします。ScrollXの値が増加します。その後、下にスクロールするとScrollYの値も増加します。


逆方向にスクロールすると値が減り、左上に戻ると両方の値が0になります。

表示結果:Microsoft Edge

Webkitの動作に準拠する、Microsoft Edgeでも動作を確認します。上記のHTMLファイルをWebブラウザで表示します。下図の画面が表示されます。


下方向にスクロールします。ScrooYの値が増加します。その後、右にスクロールするとScrollXの値も増加します。


反対向きにスクロールすると値が減少します。左上に戻ると、ScrollX,ScrollYの両方の値が0になります。

表示結果:Google Chrome

上記のHTMLファイルをGoogle Chromedeで表示します。下図の画面が表示されます。


下方向にスクロールします。ScrooYの値が増加します。その後、右にスクロールするとScrollXの値も増加します。


反対向きにスクロールすると値が減少します。左上に戻ると、ScrollX,ScrollYの両方の値が0になります。

補足：値の取得先について

スクロール量を取得する方法は複数あり、
  • window.scrollY
  • window.pageYOffset
  • document.body.scrollTop
  • document.documentElement.scrollTop
といったプロパティが利用できますが、ブラウザの種類とDOCTYPEで取得できる場合とできない場合が出てきます。
HTMLの先頭部にDOCTYPEとして以下のコードがある場合、「DOCTYPEを指定した」ものとして判断されます。 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

DOCTYPE を指定しない「後方互換(Quirks)モード」の場合

Firefox 2.0, Firefox 1.5Opera 9Safari 3.0βIE 7
IE 6
window.scrollYYESundefinedYESundefined
window.pageYOffsetYESYESYESundefined
document.body.scrollTopYESYESYESYES
document.documentElement.scrollTop常に0YES常に0常に0

DOCTYPE で「標準準拠(Standards)モード」を指定した場合

Firefox 2.0, Firefox 1.5Opera 9Safari 3.0βIE 7
IE 6
window.scrollYYESundefinedYESundefined
window.pageYOffsetYESYESYESundefined
document.body.scrollTop常に0YESYES常に0
document.documentElement.scrollTopYESYES常に0YES


補足: IE, Firefox, Microosft Edge, 古いChrome, 古いIEで動作 (縦スクロール)

先のコードでは古いChromeでは動作しませんでした。これは、古いChromeやMicrosoft EdgeといったWebkit準拠のブラウザでは　document.documentElement.scrollTop は常に0の値を返すためです。古いChromeでは、document.documentElement.scrollTop ではなく、document.body.scrollTopを利用します。
古いChromeで正しく動作させるためには、ユーザーエージェントを判定して、古いChromeや古いIEではdocument.body.scrollTopを参照する動作にします。

コード

以下のコードを記述します。
ScrollPositionMB.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 type="text/javascript">
    function onScroll() {
      if (navigator.userAgent.toLowerCase().match(/webkit|msie 5/)) {
        documentElement = document.body;
      } else {
        documentElement = document.documentElement;
      }

      var infoF = document.getElementById("infoFrame");
      infoF.innerHTML = "ScrollY:" + documentElement.scrollTop;
    }

    window.onscroll = onScroll;
  </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>

解説

navigator.userAgentでユーザーエージェントを取得し、ユーザーエージェントにWebkitの文字列が含まれる場合は、webkit系のブラウザと判定し、document.body.scrollTopを参照する動作にします。

表示結果

古いChromeで上記のHTMLファイルを表示します。下図の画面が表示されます。


下方向にスクロールします。ScrollYの数値が増加します。


画面の一番上に戻ると、ScrollYの数値は0になります。

補足: IE, Firefox, Microosft Edge, 古いChrome, 古いIEで動作 (横スクロール)

先のコードでは古いChromeでは動作しませんでした。これは、古いChromeやMicrosoft EdgeといったWebkit準拠のブラウザでは　document.documentElement.scrollLeft は常に0の値を返すためです。古いChromeでは、document.documentElement.scrollLeft ではなく、document.body.scrollLeft を利用します。
古いChromeで正しく動作させるためには、ユーザーエージェントを判定して、古いChromeや古いIEではdocument.body.scrollLeft を参照する動作にします。
<!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 type="text/javascript">
    function onScroll() {
      if (navigator.userAgent.toLowerCase().match(/webkit|msie 5/)) {
        documentElement = document.body;
      } else {
        documentElement = document.documentElement;
      }

      var infoF = document.getElementById("infoFrame");
      infoF.innerHTML = "ScrollX:" + documentElement.scrollLeft + "<br/>"
       + "ScrollY:" + documentElement.scrollTop;
    }

    window.onscroll = onScroll;
  </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>
このページのキーワード
  • スクロール量の取得 - JS でどのくらいスクロールしたかを取得する
著者
Penta
iPentecのメインプログラマー
C#, ASP.NET の開発がメイン、少し前まではDelphiを愛用

関連するページ

最終更新日: 2024-01-06
作成日: 2009-07-08
ドキュメント
新着記事一覧
タグ一覧
ドキュメント トップ
コンテンツ
YouTube
iPentec
プライバシー
iPentecについて
iPentec all rights reserverd.