はじめに

JavaScriptで現在のスクロール量を取得するためのプロパティはたくさんあります。種類がありすぎるため、かえってどれを使えばいいのかいまいちわからないという人も多いかと思います。

本記事では、各プロパティのブラウザ対応状況まとめと、現在のスクロール量を確実に取得する方法について説明します。

スクロール量を取得するプロパティ一覧

スクロール量を取得するプロパティ一覧とブラウザの対応状況は以下の通りです。window.pageYOffsetはwindow.scrollYのエイリアスなので対応状況はまったく同じです。

最新の対応状況はMDNで確認できます。

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

現在の対応状況は上記の通りですが、将来もこの対応状況が続くことはないでしょう。実際、Chromeがバージョン60からバージョン61になったときに、対応するプロパティがガラッと変更されたという前例があります。

しかし、各ブラウザの対応状況が変更されるたびに修正するのは非常に大変です。そもそもブラウザがバージョンアップするたびに対応状況を確認することすら現実的ではありません。

そこで、以下のような関数を作ることで、どのプロパティが対応しているのかを気にすることなくスクロール量を取得できるようになります。

const getScrollTop = () => {
  return Math.max(
    window.scrollY,
    window.pageYOffset,
    document.body.scrollTop,
    document.documentElement.scrollTop,
    document.scrollingElement.scrollTop
  );
}

各プロパティのうち、取得できたものの中から最大値を返す関数です。この関数を呼び出すことで確実にスクロール量を取得することができます。window.pageYOffsetはwindow.scrollYのエイリアスにすぎませんが、一応入れています。

まとめ

現在のスクロール量を確実に取得する方法については昔から議論されてきたようで、上記の方法以外にも|| (OR)を使った方法や三項演算子を使った方法などがあります。しかし、各プロパティのブラウザ対応状況までをきちんとまとめている記事はないようだったので、備忘も含めてまとめてみました。

本記事を参考にしていただければと思います。