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; // スクロール位置の取得
参考
- https://drafts.csswg.org/cssom-view/#dom-document-scrollingelement
- https://developer.mozilla.org/ja/docs/Web/API/Document/scrollingElement
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のみ非対応である。