Document: событие scroll
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2020.
Событие scroll
возникает при прокрутке области просмотра документа или элемента.
Примечание:
В iOS UIWebViews события scroll
не срабатывают во время самого прокручивания, только по его завершении. См. issue в Bootstrap #16202. Safari и WKWebViews не подвержены этому багу.
Примеры
Пропуск тактов события прокрутки
Поскольку события прокрутки могут запускаться с высокой скоростью, обработчик событий не должен выполнять вычислительно-ёмкие операции, такие как модификации DOM. Вместо этого рекомендуется пропускать такты события, используя requestAnimationFrame()
, setTimeout()
или CustomEvent
, как показано ниже.
Обратите внимание, однако, что входные события и кадры анимации запускаются примерно с одинаковой скоростью, и поэтому приведённая ниже оптимизация зачастую не требуется. В примере ниже оптимизируется событие scroll
для requestAnimationFrame
:
// Источник: http://www.html5rocks.com/en/tutorials/speed/animations/
let last_known_scroll_position = 0;
let ticking = false;
function doSomething(scroll_pos) {
// Делаем что-нибудь с позицией скролла
}
window.addEventListener("scroll", function (e) {
last_known_scroll_position = window.scrollY;
if (!ticking) {
window.requestAnimationFrame(function () {
doSomething(last_known_scroll_position);
ticking = false;
});
ticking = true;
}
});
Больше похожих примеров можно найти на странице события resize
.
Спецификации
Specification |
---|
CSSOM View Module # eventdef-document-scroll |
HTML # handler-onscroll |
Совместимость с браузерами
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
scroll event |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support