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 Устаревшая

Совместимость с браузерами

Update compatibility data on GitHub
КомпьютерыМобильные
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome для AndroidFirefox для AndroidOpera для AndroidSafari on iOSSamsung Internet
scroll eventChrome Полная поддержка 1Edge Полная поддержка 12Firefox Полная поддержка 6IE Полная поддержка 9Opera Полная поддержка 11.6Safari Полная поддержка 2WebView Android Полная поддержка 1Chrome Android Полная поддержка 18Firefox Android Полная поддержка 6Opera Android Полная поддержка 12Safari iOS Полная поддержка 1Samsung Internet Android Полная поддержка 1.0

Легенда

Полная поддержка  
Полная поддержка

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