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 возникает при прокрутке области просмотра документа или элемента.

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

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

Примеры

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

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

Обратите внимание, однако, что входные события и кадры анимации запускаются примерно с одинаковой скоростью, и поэтому приведённая ниже оптимизация зачастую не требуется. В примере ниже оптимизируется событие scroll для requestAnimationFrame:

js
// Источник: 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 GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
scroll event

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

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