Document: событие scroll
Событие scroll
возникает при прокрутке области просмотра документа или элемента.
Всплытие | Да |
---|---|
Отменяемый | Нет |
Интерфейс | Event |
Свойство обработчика событий | onscroll |
Примечание: В 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
.
Спецификация
Спецификация | Статус |
---|---|
Document Object Model (DOM) Level 3 Events Specification | Устаревшая |
Совместимость с браузерами
BCD tables only load in the browser