JavaScript: Новое событие scrollend

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

До:

document.onscroll = event => {
  clearTimeout(window.scrollEndTimer)
  window.scrollEndTimer = setTimeout(callback, 100)
}

Лучшее, что может сделать стратегия использования setTimeout(), это узнать остановилась ли прокрутка через 100 мс. Это больше похоже на то, что прокрутка приостановила событие, а не закончилось событие прокрутки.

После события scrollend, браузер делает эту сложную оценку за вас:

После:

document.onscrollend = event => {…}

Это хорошая штука. Идеально рассчитанный по времени и наполненный значимыми условиями перед выпуском

Поддержка браузерами: пока только Firefox 109 (для десктоп и android) и Chrome Canary.

Попробуйте!

See the Pen

Детали события

Событие scrollend срабатывает, когда:

• Браузер больше не анимирует или транслирует прокрутку.
• Прикосновение пользователя было завершено.
• Указатель пользователя не удерживает бегунок прокрутки.
• Клавиша нажатая пользователем была отпущена.
• Прокрутка до фрагмента была завершена.
• Привязка прокрутки завершена.
• scrollTo было завершено.
• Пользователь прокрутил окно просмотра.

Событие scrollend не срабатывает, когда:

• Жест пользователя не привёл к каким-либо изменениям положения прокрутки (трансляция не произошла).
• scrollTO() не привёл ни к какой трансляции.

Причина по которой это событие так долго не появлялось на веб-платформе, заключалась в том, что многие мелкие детали требовали детализации спецификации. Одной из самых сложных областей была формулировка деталей прокрутки Visual Viewport по сравнению с документом. Рассмотрим веб-страницу, которую вы увеличиваете. Вы можете прокручивать в этом увеличенном состоянии, и это не обязательно прокручивает документ. Будьте уверены, что даже это визуально взаимодействие прокрутки, управляемое пользователем, вызовет событие scrollend после его завершения.

Использование события

Как и другие события прокрутки, вы можете зарегистрировать слушателей несколькими способами.

addEventListener("scrollend", (event) => {
  // прокрутка завершена
});

aScrollingElement.addEventListener("scrollend", (event) => {
  // прокрутка завершена
});

или, использовать свойства события:

document.onscrollend = (event) => {
  // прокрутка завершена
};

aScrollingElement.onscrollend = (event) => {
  // прокрутка завершена
};

Полифиллы и прогрессивные улучшения

Если вы хотите использовать новое событие сейчас, вот лучший совет. Вы можете продолжать использовать свою текущую стратегию конца прокрутки (если она у вас есть) и в начале проверить поддержку с помощью:

'onscrollend' in window
// true, если доступна

Вы получите true или false в зависимости от того поддерживает ли браузер событие или нет. С помощью этой проверки вы можете разветвить код:

if ('onscrollend' in window) {
  document.onscrollend = callback
}
else {
  document.onscroll = event => {
    clearTimeout(window.scrollEndTimer)
    window.scrollEndTimer = setTimeout(callback, 100)
  }
}

Это здоровое начало для постепенного улучшения вашего события scrollend, когда оно доступно. Вы также можете попробовать полифилл (NPM), который я сделал, и он делает всё возможное, что может браузер:

import {scrollend} from "scrollyfills"

// then use scrollend as if it's existed this whole time
document.onscrollend = callback

Полифилл будет постепенно улучшаться, чтобы использовать встроенное в браузер событие scrollend, если оно доступно. Если оно не доступно, скрипт отслеживает событие указателя и прокрутки, для наилучшей оценки окончания события.

Варианты использования

Хорошей практикой является избегание сложных вычислений во время прокрутки. Это гарантирует, что прокрутка может использовать столько памяти и вычислительной мощности, сколько возможно для обеспечения бесперебойной работы. Использование события scrollend сообщает идеальное время для вызова и выполнения сложных вычислений, поскольку прокрутка завершена.

Событие scrollend можно использовать для запуска различных действий. Распространённым вариантом использования является синхронизация пользовательских элементов связанных с позицией остановки прокрутки. Например:

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

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

Также можно использовать это событие для синхронизации после программной или пользовательской прокрутки, или действий, таких как логирование аналитики.