web-dev-qa-db-ja.com

body.scrollTop vs documentElement.scrollTop vs window.pageYOffset vs window.scrollY

Webページが上からどれだけスクロールされたかを調べようとするとき、これらのうちどれを使用すべきか：

document.body.scrollTop、

document.documentElement.scrollTop、

window.pageYOffset、

window.scrollY

次の2つのシナリオで、どちらを選択しますか。

a）（現在使用されている主要なブラウザ間で）最大の互換性が必要な場合

b）ほとんどの標準に準拠/将来対応/厳格なモード互換のコードが必要な場合（ただし、古い/非標準のブラウザのサポートは気にしませんでした）

javascriptcross-browserscrolltop
35
Himanshu P

私はskrollrソースで3つを使用しています

return window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;

https://github.com/Prinzhorn/skrollr/blob/b98d40820b9864be275e81af382045d72cc5a08a/src/skrollr.js#L627

a）これまでのところ、すべてのブラウザで機能しています（過去1年間で苦情はありません）。

b）定義されている最初のものを使用するので、かなり将来性があり安定していると思います。

あなたが空想なら、あなたもこれを行うことができます

Math.max(window.pageYOffset, document.documentElement.scrollTop, document.body.scrollTop)
26
Prinzhorn

Prinzhornの回答：

Chrome/FirefoxではbodyおよびdocumentElementはundefinedであるため、次のように使用します。

return window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;

自分でテストしました。

3
Tom

Skrollrがwindow.scrollYを使用していないことを考えると、これは明白なことかもしれませんが、元の質問に対するさらなる答えとして：window.pageYOffsetはwindow.scrollYのエイリアスです。 Window.scrollY を参照してください。

3
jasonklein