scrollTop scrollLeft - ブラウザのスクロール状態を取得する

2007年6月21日(木) 19:00

JavaScriptでscrollTop scrollLeftでスクロール量を取得する際に、コンテンツの<!DOCTYPEの記述状態によって、スクロール量を取得する呼び出し方法が若干異なってくる。汎用性のあるコードで処理用のFunctionを作成しておけば、必要な場面で簡単に利用できる。

DOCTYPE あり - document.body.scrollTop
DOCTYPE なし - document.documentElement.scrollTop

縦のスクロール量を取得する際に、取得できなかった方が "0"（false）の値を返すが、ブラウザによっては"undefined"を返す場合やエラーになる場合もあるので、注意して利用する必要がある。

スクロール状態を取得するFunction

<script type="text/javascript">
document.scroll = function(){
   return {
      x: this.body.scrollLeft || this.documentElement.scrollLeft,
      y: this.body.scrollTop  || this.documentElement.scrollTop
   };
};
</script>

スクロール状態を取得する
実際にスクロール量を取得する場合は、document.scroll().y とJavaScript中で取得することが出来る。

<script type="text/javascript">
alert(document.scroll().y);  //縦スクロール量をアラーﾄ表示
</script>

最近のJavaScript記述は上記のような方法が多くなってきている。少し蛇足になるが、document.scroll()のFunction内部で、this.body.scrollTopのように、document部分をthisとして参照させている。このように参照させる事で、多少の速度向上ができる。

さくらインターネット