Элемент: событие scrollend

Событие scrollend срабатывает, когда прокрутка элемента завершена. Прокрутка считается завершенной, когда позиция прокрутки больше не имеет ожидающих обновлений, и пользователь завершил своё действие.

Обновления позиции прокрутки включают плавную или мгновенную прокрутку колесом мыши, прокрутку с клавиатуры, события scroll-snap или другие API и жесты, которые приводят к обновлению позиции прокрутки. Пользовательские жесты, такие как панорамирование касанием или прокрутка трекпада, не считаются завершенными до тех пор, пока указатели или клавиши не будут отпущены. Если позиция прокрутки не изменилась, то событие scrollend не срабатывает.

Для определения момента завершения прокрутки внутри документа, обратитесь к событию scrollend объекта Document.

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

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

onscrollend = (event) => {};

Общее Event.

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

<div id="scroll-box">
  <p id="scroll-box-title">Scroll me!</p>
  <p id="large-element"></p>
</div>
<p 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, waiting for scrollend...";
});

element.addEventListener("scrollend", (event) => {
  output.textContent = "scrollend event fired!";
});

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

<div id="scroll-box">
  <p id="scroll-box-title">Scroll me!</p>
  <p id="large-element"></p>
</div>
<p id="output">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, waiting for scrollend...";
};

element.onscrollend = (event) => {
  output.textContent = "Element scrollend event fired!";
};

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