body.scrollTop против documentElement.scrollTop против window.pageYOffset против window.scrollY

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

document.body.scrollTop,

document.documentElement.scrollTop,

window.pageYOffset,

window.scrollY

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

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

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


javascript cross-browser scrolltop
person Himanshu P    schedule 27.10.2013    source источник

Ответы (5)


arrow_upward
32
arrow_downward

Я использую три из них в исходниках скроллра

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)
person Prinzhorn    schedule 09.12.2013
comment
@Amio, спасибо, я обновил ссылку на конкретную фиксацию, чтобы она больше не менялась. - person Prinzhorn; 08.05.2014
comment
Лучше использовать document.documentElement.scrollTop - person McX; 19.02.2015
comment
Для какого браузера используется window.pageYOffset? - person Jessica; 08.09.2016
comment
@Джессика, я думаю, Netscape (!). - person phk; 11.12.2017

arrow_upward
3
arrow_downward

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

person jasonklein    schedule 24.03.2015

arrow_upward
3
arrow_downward

На ответ Принцхорна:

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

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

Проверено на себе.

person Tom    schedule 28.06.2016
comment
document.body.scrollTop в FF не работает, а document.documentElement.scrollTop ведет себя странно: иногда значения нечетные. - person willy wonka; 06.02.2017

arrow_upward
1
arrow_downward

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

person yaya    schedule 30.09.2019

arrow_upward
0
arrow_downward 

console.log('body.scrollTop : ' + document.body.scrollTop);
console.log('documentElement.scrollTop : ' + document.documentElement.scrollTop);
console.log('window.pageYOffset : ' + window.pageYOffset);
console.log('window.scrollY : ' + window.scrollY);

Выход 1:

0

184.8000030517578

184.8000030517578

184.8000030517578

Выход 2:

0

185.8000037517577

185.8000037517577

185.8000037517577

И так далее...

Протестировано в Google Chrome – версия 85.0.4183.121 (официальная сборка) (64-разрядная версия)

document.body.scrollTop

Здесь всегда выдается 0, но остальные три работают отлично.

person iamfnizami    schedule 28.09.2020