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

Базовая линия Широко поддерживается

Эта функция хорошо зарекомендовала себя и работает на многих устройствах и версиях браузеров. Она доступна в браузерах с сентября 2020 года.

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

Синтаксис

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

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

onscroll = (event) => {};

Тип события

Общее Event.

Примеры

В следующих примерах показано, как использовать событие scroll с обработчиком событий и свойством обработчика события onscroll. Метод setTimeout() используется для ограничения обработчика событий, поскольку события scroll могут срабатывать с высокой частотой. Дополнительные примеры, использующие requestAnimationFrame(), см. на странице события Document scroll.

Использование `scroll` с обработчиком событий

Следующий пример демонстрирует, как использовать событие scroll для определения момента, когда пользователь прокручивает элемент:

<div
  id="scroll-box"
  style="overflow: scroll; height: 100px; width: 100px; float: left;">
  <p style="height: 200px; width: 200px;">Scroll me!</p>
</div>
<p style="text-align: center;" id="output">Waiting on scroll events...</p>

const element = document.querySelector("div#scroll-box");
const output = document.querySelector("p#output");

element.addEventListener("scroll", (event) => {
  output.textContent = "Scroll event fired!";
  setTimeout(() => {
    output.textContent = "Waiting on scroll events...";
  }, 1000);
});

Использование свойства обработчика событий `onscroll`

Следующий пример демонстрирует, как использовать свойство обработчика событий onscroll для определения момента прокрутки пользователя:

<div
  id="scroll-box"
  style="overflow: scroll; height: 100px; width: 100px; float: left;">
  <p style="height: 200px; width: 200px;">Scroll me!</p>
</div>
<p id="output" style="text-align: center;">Waiting on scroll events...</p>

const element = document.querySelector("div#scroll-box");
const output = document.querySelector("p#output");

element.onscroll = (event) => {
  output.textContent = "Element scroll event fired!";
  setTimeout(() => {
    output.textContent = "Waiting on scroll events...";
  }, 1000);
};

Спецификации

Спецификация
Модуль CSSOM View # eventdef-document-scroll
HTML # handler-onscroll

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

	Рабочий стол					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari на iOS	Samsung Internet	WebView Android
`scroll_event`	1	12	6	≤12.1	1.3	18	6	≤12.1	1	1.0	4.4

См. также

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/Element/scroll_event