webサイト作成時にスクロール位置の取得することが多いので、今後のために方法をまとめました。結論を先に書くとdocument.scrollingElementというプロパティがあるので、それを使いましょう。
スクロール位置を取得する
スクロール位置はscrollTopプロパティで取得と設定ができます。scrollTopで要素の最上部から下肢部分の最上部までの距離（ピクセル）を取得できます。スクロール位置を設定する時は値を代入します。下記ではhtml要素のスクロール位置を取得してます。
// html要素のスクロール位置を取得
console.log(document.documentElement.scrollTop);ブラウザごとに使う要素が異なる
困ったことにスクロール位置を取得するときに使う要素がブラウザごとに違います。たとえばfirefoxではhtml要素のscrollTopでスクロール位置を取得することができますが、webkitであるsafariでは取得できず、body要素のscrollTopを取得しなければいけません。同じwebkitのchromeですが、バージョン61以降はhtml要素で取得できます。しかしchromeの古いバージョンではbody要素を使う必要があるのでブラウザ判定ができなくなります。
// safariやバージョン61より前のchrome
document.body.scrollTop
// firefoxやバージョン61以降のchrome,ie,edgeなど
document.documentElement.scrollTop scrollingElementプロパティを使う
上に書いた問題のより良い解決策としてscrollingElementプロパティを使方法があります。scrollingElementとはdocumentのプロパティでdocumentのスクロール要素を取得することができます。しかも互換モードであればbody要素を、そうでない時にはhtml要素を取得できます。scrollingElementプロパティを使えばbody要素とhtml要素を分ける処理が不要になります。スクロール要素がない場合にはnullとなるようです。
// documentのスクロール要素取得
const scrollElement = document.scrollingElement;
// スクロール位置の取得
const scrollTopValue = scrollElement.scrollTop; IEでは使えません
scrollingElementを使うことで万事解決かと思いきや、悲しいことにscrollingElementはIEで対応していません。IEも対応する場合にはscrollingElementがあるか確認するなどしてIEのみの処理をする必要があります。
const 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のみ非対応である。
