【CSS+JS】現在のスクロール量を確実に取得する(プロパティ対応状況まとめ)

2021年6月7日 12:34

はじめに

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

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

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

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

プロパティ名
window.scrollY ×
window.pageYOffset ×
document.body.scrollTop × × × ×
document.documentElement.scrollTop ×
document.scrollingElement.scrollTop ×

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

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

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

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

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

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

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

まとめ

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

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

関連記事

【CSS+JS】ウィンドウ内全体にファイルをドラッグ&ドロップしてアップロード
# はじめに ユーザーが選択したファイルをアップロードする必要がある場合、ファイル選択フィールドを設置することはもちろんですが、ファイルをドラッグ&ドロップしてアップロードできるようにもなっていると使い勝手のいいサービスだと言えます。しかし、ドラ [...]
2021年6月2日 15:15
【CSS+JS】モーダルウィンドウを表示しその中にYouTube動画を動的に埋め込む
# はじめに 動画のサムネイル画像をクリックしてモーダルウィンドウを表示し、その中にYouTube動画を動的に埋め込む方法について説明します。なお、本記事ではYouTube動画を動的に埋め込むまでを範囲とし、埋め込んだ動画の再生制御などは範囲外と [...]
2021年5月20日 23:23
【CSS+JS】テキストを1文字ずつ表示するアニメーションの実装方法
# はじめに モダンなサイトでよく見かける「テキストを1文字ずつ表示するアニメーション」の実装方法を解説します。 # 実装 ## サンプル 繰り返し動作を確認したい場合は右下の「Rerun」ボタンをクリックしてください。 <i [...]
2021年5月20日 13:26
【CSS】CSSカスタムプロパティとJavaScriptを使ってモード切替(配色変更)を実装
# はじめに 便利なCSSカスタムプロパティ。実はJavaScriptから取得/設定ができます。今回はCSSカスタムプロパティとJavaScriptを使ってモード切替(配色変更)を実装する方法を解説します。 # CSSカスタムプロパティ [...]
2020年8月30日 18:07
【脱・jQuery】jQueryで書いたAjaxをJavaScriptのFetch APIで書き直してみた
# はじめに これまでJavaScriptの処理を書くときはjQueryを使っていました。昔のJavaScriptはブラウザ互換性問題などがありとてもゴタゴタしていたので、jQueryを知ってからはその便利さに頼りっきりになっていました。 [...]
2020年3月8日 9:37