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

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

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

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

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

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

onscrollend = (event) => {};

Общее событие Event.

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

<div class="box-wrapper">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>
<p id="output">Waiting on scroll events...</p>

const output = document.querySelector("p#output");

document.addEventListener("scroll", (event) => {
  output.textContent = "Document scroll event fired!";
});

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

Следующий пример демонстрирует, как использовать свойство обработчика событий scrollend для определения момента, когда пользователь прекратил прокрутку документа. В примере содержимое вложенного iframe больше и шире самого iframe, поэтому прокрутка в iframe возможна в обоих направлениях. Этот пример дополняет первый, но использует document.onscrollend вместо обработчика событий:

<div class="box-wrapper">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>
<p id="output">Waiting on scroll events...</p>

document.onscroll = (event) => {
  output.textContent = "Document scroll event fired!";
};

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

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