javascriptで簡単にスクロール位置を取得する

webサイト作成時にスクロール位置の取得することが多いので、今後のために方法をまとめました。結論を先に書くとdocument.scrollingElementというプロパティがあるので、それを使いましょう。

スクロール位置を取得する

スクロール位置はscrollTopプロパティで取得と設定ができます。scrollTopで要素の最上部から下肢部分の最上部までの距離（ピクセル）を取得できます。スクロール位置を設定する時は値を代入します。下記ではhtml要素のスクロール位置を取得してます。

console.log(document.documentElement.scrollTop);
// html要素のスクロール位置を取得

ブラウザごとに使う要素が異なる

困ったことにスクロール位置を取得するときに使う要素がブラウザごとに違います。たとえばfirefoxではhtml要素のscrollTopでスクロール位置を取得することができますが、webkitであるsafariでは取得できず、body要素のscrollTopを取得しなければいけません。同じwebkitのchromeですが、バージョン61以降はhtml要素で取得できます。しかしchromeの古いバージョンではbody要素を使う必要があるのでブラウザ判定ができなくなります。

document.body.scrollTop // safariやバージョン61より前のchrome
document.documentElement.scrollTop //firefoxやバージョン61以降のchrome,ie,edgeなど

参考：https://www.chromestatus.com/feature/6386758136627200

scrollingElementプロパティを使う

上に書いた問題のより良い解決策としてscrollingElementプロパティを使方法があります。scrollingElementとはdocumentのプロパティでdocumentのスクロール要素を取得することができます。しかも互換モードであればbody要素を、そうでない時にはhtml要素を取得できます。scrollingElementプロパティを使えばbody要素とhtml要素を分ける処理が不要になります。スクロール要素がない場合にはnullとなるようです。

var scrollElement = document.scrollingElement; // documentのスクロール要素取得
var scrollValue = scrollElement.scrollTop; // スクロール位置の取得

参考

IEでは使えません

scrollingElementを使うことで万事解決かと思いきや、悲しいことにscrollingElementはIEで対応していません。IEも対応する場合にはscrollingElementがあるか確認するなどしてIEのみの処理をする必要があります。

var scrollElement = 'scrollingElement' in document ? document.scrollingElement : document.documentElement;

上記はdocumentにscrollingElementがあればscrollElementにdocument.scrollingElementを、そうでない時にはhtml要素を代入します。

スクロール位置を取得するときはscrollingElementを使いましょう

  • スクロール位置はscrollTopで取得する
  • スクロール位置を取得する時に使う要素はブラウザごとに違う
  • スクロール位置を取得する時に使う要素はscrollingElementで取得する
  • scrollingElementはIEのみ非対応である

スクロール位置はscrollTopプロパティから取得できるが、スクロールを取得する時に使う要素はbody要素であったり、html要素であったりブラウザごとに違う。scrollingElementプロパティを使うことでdocumentのスクロール要素を取得でき、ブラウザごとの処理が不要となる。ただしscrollingElementはIEのみ非対応である。

 

関連記事