body.scrollTop vs documentElement.scrollTop vs window.pagYOffset vs window.scrollY

Question

Gdy próbuje dowiedzieć się, ile strona internetowa została przewijane od góry, które z nich należy stosować:

document.body.scrollTop,

document.documentElement.scrollTop,

window.pagYOffset,

window.scrollY

Który (e) wybrałbym w tych 2 oddzielnych scenariuszy:

a) Gdybym chciał maksymalną kompatybilność (naprzeciwko głównych przeglądarek używanych obecnie)

b) jeżeli chciałem kodu, który był najbardziej skarga standardy/przyszłościowy/zgodny ze ścisłym trybem (ale nie dbał o obsługę starych/niezarejestrowanych przeglądarek)?

Answer 1

Używam trzy z nich w źródle skrollr

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

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

wa) Do tej pory to działa we wszystkich przeglądarkach (nikt reklamację w ubiegłym roku).

b) Ponieważ użyje pierwszego zdefiniowanego, myślę, że jest całkiem przyszłościowy i stabilny.

Jeśli jesteś fantazyjne można to zrobić również

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

Answer 2

Zważywszy, że skrollr nie używa window.scrollY, może to być oczywiste, ale jak dalej odpowiedź do pierwotnego pytania: window.pageYOffset jest aliasem window.scrollY. Zobacz Window.scrollY.

Answer 3

Aby answear Prinzhorn „s:

Od body i documentElement jest undefined w Chrome/Firefox, lepsze wykorzystanie:

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

Testowany siebie.