Представляем Scrollend: новое событие JavaScript, о котором вам нужно знать

Как использовать Scrollend для лучшего UX и более эффективного кода

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

К счастью, мир JavaScript теперь приветствует событие scrollend, которое полностью меняет правила обработки событий прокрутки. Событие scrollend предназначено для запуска после того, как действие прокрутки действительно закончилось. Это переносит бремя выяснения момента окончания прокрутки с разработчика на браузер.

Это событие можно довольно легко зацепить. Вот простая реализация:

document.onscrollend = event => {
  // Your code here
}

Эта чистая реализация устраняет необходимость в каких-либо функциях тайм-аута и гарантирует, что событие сработает в нужное время. Браузер выполняет тяжелую работу по оценке всех условий перед отправкой события scrollend.

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

Событие scrollend срабатывает при нескольких условиях:

Браузер завершил анимацию или перевод прокрутки.
Пользователь убрал палец с сенсорного экрана.
Пользователь отпустил большой палец прокрутки.
Пользователь отпустил клавишу, которую нажимал для прокрутки.
Операция прокрутки к фрагменту завершена.
Операция привязки прокрутки завершена.
Функция scrollTo() завершила выполнение.
Пользователь прокрутил визуальное окно просмотра.

С другой стороны, событие scrollend не сработает, если:

Жест пользователя не приводил к изменению положения прокрутки (трансляции не было).
Функция scrollTo() не привела ни к какому переводу.

Детали спецификации события scrollend весьма дотошны, что, вероятно, объясняет, почему потребовалось так много времени, чтобы это событие появилось на веб-платформе.

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

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

// using addEventListener method
document.addEventListener("scrollend", (event) => {
  // scroll has ended
});

// or using the event property
document.onscrollend = (event) => {
  // scroll has ended
};

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

Работа с поддержкой браузера

Событие scrollend имело разный уровень поддержки в разных браузерах.

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

'onscrollend' in window // true, if available

К счастью, здесь тоже есть симпатичный полифилл:

npm i -D scrollyfills
import { scrollend } from 'scrollyfills';

// use the new event as if it's been there the whole time
someElementThatScrolls.addEventListener('scrollend', event => {
  console.log('scroll has ended');
});

Заворачивать

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

Спасибо, что прочитали. Если вам нравятся такие истории и вы хотите поддержать меня, пожалуйста, подумайте о том, чтобы стать участником Medium. Это стоит 5 долларов в месяц и дает вам неограниченный доступ к контенту Medium. Я получу небольшую комиссию, если вы зарегистрируетесь по моей ссылке.