Разница между window.pageYOffset и document.body.getBoundingClientRect (). Top?
Я делаю индикатор выполнения в зависимости от того, сколько прокручиваете. Какой из этих двух мне следует использовать?
function getScrollValue() {
return ((parseInt(document.body.getBoundingClientRect().top) * -1));
}
или
function getScrollValue() {
return window.pageYOffset;
}
Используйте window.pageYOffset (IntersectionObserver не поддерживается IE)
@JakobE Есть полифил.
Да, но в этом случае (просто отслеживание прокрутки страницы) это излишне (полифилл также использует прослушиватели прокрутки). Я бы использовал прослушиватели прокрутки и пассивные события, если они доступны
@JakobE IntersectionObserver существует потому, что наивное решение для обработчиков прокрутки часто создает проблемы с производительностью. Повышение производительности для совместимых браузеров при одновременном предоставлении полифилла для сильно устаревших браузеров - не излишество.
Я знаю об этом - затраты на реализацию полифилла, предназначенного для гораздо большего, чем мониторинг положения прокрутки, IMO выше, чем при использовании более простого прослушивателя прокрутки.
Позвольте нам продолжить обсуждение в чате.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Помимо того, что window.pageYOffset является более специализированным API, а также более производительным решением для определения значения прокрутки, использование getBoundingClientRect().top для попытки сделать то же самое может иметь неожиданные результаты, если, например, у тела есть некоторый верхний край, который смещает его положение.
РЕДАКТИРОВАТЬ
Я включил следующий jsPerf Test, который показывает существенную разницу в производительности между двумя альтернативами, а также то, как работает третий (более старый) API по сравнению с ними.
Простой пример с использованием тега индикатора выполнения
/* test if passive events are supported */
var supportsPassive = false;
try { var opts = Object.defineProperty({}, 'passive', { get: function() { supportsPassive = true; }});
window.addEventListener("testPassive", null, opts);
window.removeEventListener("testPassive", null, opts);
} catch (e) {}
/* progress element */
const progress = document.querySelector('progress');
/* scroll listener */
addEventListener('scroll', e => {
progress.value = pageYOffset/(document.body.clientHeight - innerHeight);
}, supportsPassive ? { passive: true } : false);/* stretch and fix progress */
progress { width: 100%; position: fixed; }
/* add some scroll to the page */
body { margin: 0; height: 20000px; }<progress value = "0"></progress>