Body.scrollTop vs documentElement.scrollTop vs window.pageYOffset vs window.scrollY

При попытке узнать, сколько веб-страниц было прокручено сверху, какой из них следует использовать:

document.body.scrollTop,

document.documentElement.scrollTop,

window.pageYOffset,

window.scrollY

Какой вариант я бы выбрал в этих 2 отдельных сценариях:

а) Если бы я хотел максимальной совместимости (во всех основных браузерах, используемых в настоящее время)?

б) Если бы я хотел, чтобы код был наиболее совместимым со стандартами/будущим/совместимым со строгим режимом (но не заботился о поддержке старых/нестандартных браузеров)?

Ответ 1

Я использую три из них в источнике skrollr

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

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

а) Пока это работает во всех браузерах (никто не жаловался в прошлом году).

б) Так как он будет использовать первый, который определен, я думаю, что он достаточно перспективен и стабилен.

Если вы хотите, вы можете это сделать

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

Ответ 2

Учитывая, что skrollr не использует window.scrollY, это, возможно, было очевидно, но в качестве дополнительного ответа на исходный вопрос: window.pageYOffset является псевдонимом для window.scrollY. См. Window.scrollY.

Ответ 3

Кому Prinzhorn:

Так как body и documentElement есть undefined в Chrome/Firefox, лучше используйте:

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

Протестировал себя.

Ответ 4

Chrome использует documentElement.scrollTop, Firefox использует body.scrollTop