好きなだけかりんとうを食べる人生

フロントエンドとかデザインとかバックエンドとか浅く広く。社会人3年目のうぇぶでぃれくたーです。

Javascriptでスクロール量を取得する時の話

今更だけど、自分はパララックスデザインが好きです。
好きなものが流行ってると見る機会が多くなってニヤニヤできるからとってもうれしい。

ちなみにパララックスを導入する時にはjQueryプラグインを使うとめちゃめちゃ簡単に導入できる。 skrollrとか。

でもやっぱり自分の手で実装したい感ある。
なんでもjQueryに頼るのはスマートじゃないし。

というわけでせこせこピュアJSでコード書いてみたら「スクロール量を取得」するところでつまづいたのでメモ。前置きながいね。

スクロール量を取得するには

スクロール量を取得するメソッドはいくつか存在する。

  • document.body.scrollTop
  • window.pageYOffset
  • window.scrollY
  • document.documentElement.scrollTop

それぞれブラウザやDOCTYPEでのモード指定(後方互換とかそういうの)対応状況が違うからめんどくさい! 例えばIE8だとwindowpageYoffsetはundefinedを返すし、firefoxだとdocument.body.scrollTopは返り値が0になる。 じゃあdocument.documentElement.scrollTopでいいじゃんって話になるけれど、webkit系のブラウザ(chrome,safari)の対応があやしい。

じゃあどうすればいいんだろう

function getPos() {
    var scroll = (window.pageYOffset !== undefined) ? window.pageYOffset : document.documentElement.scrollTop;
}

window.onscroll = function() {
    getPos();
}

とりあえずこれでブラウザ毎の対応はできてるはず。
DOCTYPE宣言忘れるようなドジっ子は知らないよ〜〜〜

あと位置情報系のメソッドいい加減おぼえたい。今度まとめるかな…