Документ: событие прокрутки

Событие scroll срабатывает, когда просмотренное представление документа было прокручено. Чтобы определить, когда прокрутка завершена, см. событие scrollend для Document. Для прокрутки элемента см. событие scroll для Element.

Используйте имя события в методах, таких как addEventListener(), или установите свойство обработчика событий.

addEventListener("scroll", (event) => {});

onscroll = (event) => {};

Общее Event.

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

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

let lastKnownScrollPosition = 0;
let ticking = false;

function doSomething(scrollPos) {
  // Do something with the scroll position
}

document.addEventListener("scroll", (event) => {
  lastKnownScrollPosition = window.scrollY;

  if (!ticking) {
    window.requestAnimationFrame(() => {
      doSomething(lastKnownScrollPosition);
      ticking = false;
    });

    ticking = true;
  }
});

• Документ: событие scrollend
• Элемент: событие scroll
• Элемент: событие scrollend