События прокрутки привязки

Адам Аргайл
Adam Argyle
X GitHub

В Chrome 129 вы можете использовать события scrollSnapChange и scrollSnapChanging из JavaScript. Благодаря реализации встроенных событий моментальной привязки ранее невидимое состояние моментальной привязки станет активным в нужный момент и всегда корректным. Это не то удобство, которое у вас было бы без этих событий.

Поддержка браузера

  • Хром: 129.
  • Край: 129.
  • Firefox: не поддерживается.
  • Сафари: не поддерживается.

Источник

Поддержка браузера

  • Хром: 129.
  • Край: 129.
  • Firefox: не поддерживается.
  • Сафари: не поддерживается.

Источник

До использования scrollSnapChange вы могли использовать наблюдатель пересечений , чтобы определить, какой элемент пересекал порт прокрутки, но определение того, что было зафиксировано, было ограничено несколькими обстоятельствами. Например, вы можете определить, заполняют ли элементы привязки порт прокрутки или большую его часть. Для этого вы должны наблюдать за пересекающимися элементами области прокрутки, затем в зависимости от того, какой элемент занимает большую часть области прокрутки, предположить, что это цель привязки, затем дождаться scrollend и действовать в соответствии с закрепленным элементом (цель привязки). .

Однако до scrollSnapChanging было невозможно узнать, когда меняется цель привязки или на что она меняется (например, при прокрутке).

Горизонтальный скроллер отображается с пронумерованными прямоугольниками внутри в качестве целей привязки. Слева находится журнал событий ScrollSnapChange в реальном времени, SnapTargetInline выделен синим цветом. Справа — журнал событий ScrollSnapChanging в реальном времени, SnapTargetInline выделен серым цветом.

Попробуйте это
https://codepen.io/web-dot-dev/pen/jOjaaEP

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

прокруткаSnapChange

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

  1. После того, как свиток отдохнул.
  2. Перед scrollend .

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

scroller.addEventListener('scrollsnapchange', event => {
  console.log(event.snapTargetBlock);
  console.log(event.snapTargetInline);
})

scroller.onscrollsnapchange = event => {
  console.log(event.snapTargetBlock);
  console.log(event.snapTargetInline);
}

Событие предоставляет привязанный элемент в объекте события как snapTargetBlock и snapTargetInline . Если скроллер расположен только горизонтально, свойство snapTargetBlock будет иметь null . Значением свойства будет узел элемента.

Уникальные детали для ScrollSnapChange

Не срабатывает, пока пользователь не отпустит жест

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

Не срабатывает, если цель привязки не изменилась

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

прокруткаSnapChanging

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

scroller.addEventListener('scrollsnapchanging', event => {
  console.log(event.snapTargetBlock);
  console.log(event.snapTargetInline);
})

scroller.onscrollsnapchanging = event => {
  console.log(event.snapTargetBlock);
  console.log(event.snapTargetInline);
}

Событие предоставляет привязанный элемент в объекте события как snapTargetBlock и snapTargetInline . Если скроллер только вертикальный, свойство snapTargetInline будет иметь null . Значением свойства будет узел элемента.

Уникальные детали для ScrollSnapChanging

Срабатывает рано и часто во время жеста прокрутки

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

Не стреляет по всем привязываемым целям на пути к новой привязываемой цели.

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

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

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

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

Выделите отзыв

Этот пример продвигает или визуально фокусирует снятый отзыв.

scroller.onscrollsnapchange = event => {
  scroller.querySelector(':scope .snapped')?.classList.remove('snapped')
  event.snapTargetInline.classList.add('snapped')
}
https://codepen.io/web-dot-dev/pen/dyBZZPe

Показать заголовок прикрепленного элемента

В этом примере показан заголовок прикрепленного элемента. Оба события включены в эту демонстрацию, поэтому вы можете увидеть разницу во времени и пользовательском опыте между scrollSnapChange и scrollSnapChanging .

Привязка к изменению
https://codepen.io/web-dot-dev/pen/wvLPPBL

Быстрое изменение
https://codepen.io/web-dot-dev/pen/QWXOObw

Анимировать один раз дочерние элементы слайда презентации

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

document.addEventListener('scrollsnapchange', event => {
  event.snapTargetBlock.classList.add('seen')
})
https://codepen.io/web-dot-dev/pen/rNEYYVj

Привязка к x и y в скроллере

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

Показана сетка квадратов в горизонтальном и вертикальном скроллере. Пунктирная граница представляет цель ScrollSnapChanging, а сплошная граница — цель ScrollSnapChange. Красный цвет представляет snapTargetInline, а синий — snapTargetBlock.

https://codepen.io/web-dot-dev/pen/qBzVVdp

Два связанных скроллера

В этой демонстрации есть два контейнера привязки прокрутки, один из которых представляет собой список ссылок высокого уровня, а другой — фактический постраничный контент. Новое событие scrollSnapChanging упрощает двустороннюю связь состояний привязки, чтобы они всегда были синхронизированы.

https://codepen.io/web-dot-dev/pen/YzoEEXj

Выбор цвета OKLCH

В этой демонстрации есть 3 скроллера, каждый из которых представляет отдельный цветовой канал в OKLCH . Зафиксированный элемент синхронизируется с соответствующей группой переключателей, и данные можно получить из формы, обертывающей входные данные. Для пользователя с помощью мыши или сенсорного экрана вы можете прокрутить до нужного значения. Пользователи клавиатуры могут использовать клавиши Tab и клавиши со стрелками. Для программы чтения с экрана это просто форма.

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

https://codepen.io/web-dot-dev/pen/OJeOOVG

Захват потрясающих анимированных хабов

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

Проверьте поддержку событий с помощью следующего JavaScript:

if ('onscrollsnapchange' in window) {
  // ok to use snap change
}
https://codepen.io/web-dot-dev/pen/MWMOOae

Прокручиваемый ввод линейки

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

https://codepen.io/web-dot-dev/pen/LYKOOpd

Покрытие потока

Эта демонстрация основана на превосходной анимации Брамуса Ван Дамма, воссоздающей знаменитую обложку macOS ( также видеоурок ). Уникально, scrollSnapChanging используется для скрытия названия альбома, а scrollSnapChange используется для представления названия. События помогают организовать энергичное скрытие старого названия и ленивую презентацию нового.

https://codepen.io/web-dot-dev/pen/Bagmmog

Еще больше идей для вдохновения на творчество

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

  • Запуск отложенной загрузки, известной как рендеринг или выборка данных с запуском Snapchange.
  • Миниатюры кинопленок, связанные с увеличенным изображением.
  • Переключение воспроизведения/паузы для трейлера видео для миниатюры видео.
  • Аналитическое отслеживание
  • Прокрутка
  • Колесо Фортуны UI/UX
  • Цель привязки получает закрепленную подсказку.
  • Нажмите, чтобы сделать снимок
  • Прикрепите, чтобы показать
  • Звуки при щелчке
  • Проведите пальцем по интерфейсу
  • Пролистываемые вкладки или карусели

Дальнейшие исследования

Команда Chrome рада услышать, что вы создаете с помощью этих новых API, и надеется, что это поможет упростить работу с прокруткой.

Ресурсы: