Document: событие scroll

Событие scroll возникает при прокрутке области просмотра документа или элемента.

Всплытие Да
Отменяемый Нет
Интерфейс Event
Свойство обработчика событий onscroll

Примечание: В iOS UIWebViews события scroll не срабатывают во время самого прокручивания, только по его завершении. См. issue в Bootstrap #16202. Safari и WKWebViews не подвержены этому багу.

Примеры

Пропуск тактов события прокрутки

Поскольку события прокрутки могут запускаться с высокой скоростью, обработчик событий не должен выполнять вычислительно-ёмкие операции, такие как модификации DOM. Вместо этого рекомендуется пропускать такты события, используя requestAnimationFrame(), setTimeout() или CustomEvent (en-US), как показано ниже.

Обратите внимание, однако, что входные события и кадры анимации запускаются примерно с одинаковой скоростью, и поэтому приведённая ниже оптимизация зачастую не требуется. В примере ниже оптимизируется событие 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

Смотрите также