スクロール量を取得するJavaScript入門

スクロール量を取得するJavaScript

まずは、スクロール量を取得する命令を見ておきましょう。

document.body.scrollTop

縦にどれほどスクロールしたかを取得（互換モード）

document.body.scrollLeft

横にどれほどスクロールしたかを取得（互換モード）

document.documentElement.scrollTop

縦にどれほどスクロールしたかを取得（標準モード）

document.documentElement.scrollLeft

横にどれほどスクロールしたかを取得（標準モード）

HTMLの記述の仕方とブラウザの種類によってどちらで取得できるかが決まります。 以下のサンプルで用いているHTML5で記述した場合、ChromeやSafariではdocument.bodyで、FireFoxやIE ver.11ではdocument.documentElementで取得できました。

スクロール量を取得するサンプル

では、スクロール量を取得する簡単なサンプルを見てみましょう。 以下のサンプルページでは、10000px四方のdivタグを作成しています。スクロールバーが出ていると思うので、 任意の場所までスクロールし、適当な部分をクリックして下さい。 スクロール量がアラート表示されます（２回）。

サンプルページ（別窓）

<style type="text/css">
div{ width:10000px; height:10000px }
</style>

<div onclick="scr()"></div>

<script>
function scr(){
  var x = document.body.scrollLeft;
  var y = document.body.scrollTop;
  
  alert("横" + x + "px，縦" + y + "px");
  
  x = document.documentElement.scrollLeft;
  y = document.documentElement.scrollTop;

  alert("横" + x + "px，縦" + y + "px");
}
</script>

上記サンプルの解説です。

スタイルシート部分

<style type="text/css">

div{ width:10000px; height:10000px }

</style>

まず最初に、divタグの横幅＆縦幅を10000pxに指定しました。これなら4Kのモニターでもスクロールバーが出るはずです。

HTML部分

<div onclick="scr()"></div>

HTMLのbody内は1行だけです。divタグを記述し、onclickで関数scr()を呼び出すようにしています。

関数scr()部分

var x = document.body.scrollLeft;

var y = document.body.scrollTop;

alert("横" + x + "px，縦" + y + "px");

関数scr()では、最初にdocument.body～でスクロール量を取得しています。縦・横のスクロール量を取得し、 変数x，変数yに代入しています。そしてalert()でスクロール量を表示します。

x = document.documentElement.scrollLeft;

y = document.documentElement.scrollTop;

alert("横" + x + "px，縦" + y + "px");

続いて、document.documentElement～を使ってスクロール量を取得し、変数x,yに代入してalert()で表示させています。 皆様のブラウザではどちらで正しく表示されたでしょうか？

次のページで、より具体的なサンプルを見てみることにしましょう。