【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】メニューアイコンの一種、ベントーメニューの実装方法(アニメーション付き)
# はじめに メニューアイコンの中ではハンバーガーメニューが有名だと思いますが、その他にもいろいろな種類があって、それぞれに名前もつけられています。 <a class="gallery" data-group="gallery" href= [...]
2021年10月18日 14:26
【CSS+JS】メインコンテンツの裏から現れるフッターの実装方法
# はじめに オシャレなサイトなどでたまに見かける「メインコンテンツの裏から現れるフッター」の実装方法について説明します。 # サンプル <iframe height="392" style="width: 100%;" scrollin [...]
2021年10月18日 13:26
【CSS+JS】背景画像の視差効果(パララックス)を実装する方法
# はじめに JavaScriptプラグインを使わずに、背景画像の視差効果(パララックス)をVanilla JS(ピュアなJavaScript)だけで実装する方法について説明します。 # サンプル まず、背景画像の視差効果(パララックス) [...]
2021年10月17日 12:08
【CSS+JS】ウィンドウ内全体にファイルをドラッグ&ドロップしてアップロード
# はじめに ユーザーが選択したファイルをアップロードする必要がある場合、ファイル選択フィールドを設置することはもちろんですが、ファイルをドラッグ&ドロップしてアップロードできるようにもなっていると使い勝手のいいサービスだと言えます。しかし、ドラ [...]
2021年6月2日 15:15
【CSS+JS】モーダルウィンドウを表示しその中にYouTube動画を動的に埋め込む
# はじめに 動画のサムネイル画像をクリックしてモーダルウィンドウを表示し、その中にYouTube動画を動的に埋め込む方法について説明します。なお、本記事ではYouTube動画を動的に埋め込むまでを範囲とし、埋め込んだ動画の再生制御などは範囲外と [...]
2021年5月20日 23:23