iOSとそれ以外のOSのブラウザでスクロールイベントを取得する方法

はじめに

手持ちのiOSでのスクロールイベントの取得で詰まったりしたので備忘録。

スクロール量の取得

以下の4つのどれかを参照する事でスクロール量を取得可能である。

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

document.documentElement.scrollTopとdocument.body.scrollTopはどちらか片方しか定義されていないブラウザが多いので、参照するなら以下のようにすべきだろう。

document.documentElement.scrollTop || document.body.scrollTop

参考：各ブラウザにおけるスクロール量の値

Macの各ブラウザのコンソールから以下のイベントを生やしてログを見た。

window.addEventListener("scroll", function () {
  console.log(document.documentElement.scrollTop + "," + document.body.scrollTop + "," + window.pageYOffset + "," + window.scrollY);
}, false);

結果

ブラウザ	document.documentElement.scrollTop	document.body.scrollTop	window.pageYOffset	window.scrollY
Chrome	120	0	120	120
Firefox	120	0	119.80000305175781	119.80000305175781
Safari	120	0	120	120
Opera	120	0	120	120

PCとAndroidにおけるスクロールイベントの取得

PCやAndroidでは以下のようにaddEventListenerのscrollイベントでスクロールの座標を取得できる。

window.addEventListener("scroll", function () {
  var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
}, false);

iOSにおけるスクロールイベントの取得

iOSではscrollイベントが発火されない。
なのでsetTimeoutを使って随時window.pageYOffsetを取得し、スクロールイベントを検知する。

setTimeout(function () {
  var scrollTop = window.pageYOffset;
}, 10);

上のコードでは指を離した後の慣性スクロールも検知可能。
setTimeoutのディレイミリ秒数は状況に応じて自由に変更してください。

参考：touchmoveとtouchendは使えないのか?

touchmoveとtouchendを用いる事で以下のように指によるスクロールイベントを検知可能である。

function scrollChange () {
  var scrollTop = window.pageYOffset;
}
window.addEventListener("touchmove", scrollChange, false);
window.addEventListener("touchend", scrollChange, false);

しかし、上のコードは実際には使い物にならないだろう。
理由は指を離した後の慣性スクロールを一切検知できないからである。

どのOSでもスクロールイベントの取得する方法

onscrollイベントハンドラーを使えばOSに関わらずスクロールイベントを取得可能。
ただし、addEventListenerと違って複数ハンドリングできず、他のjsに関数を書き換えられる可能性すらあることに注意。

window.onscroll = function () {
  var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
}