SnapEvent

Интерфейс SnapEvent определяет объект события для событий scrollsnapchanging и scrollsnapchange. Соответственно, эти события срабатывают в контейнере прокрутки контейнере прокрутки, когда браузер определяет, что новый целевой элемент для прокрутки с привязкой (будет выбран при завершении текущего жеста прокрутки) ожидается, и когда новый целевой элемент для прокрутки с привязкой выбран.

Эти события могут быть использованы для выполнения кода в ответ на привязку к новым элементам; SnapEvent предоставляет ссылки на элемент, к которому производится привязка по направлению в строку и/или по направлению в столбец. Значения свойств, доступные в SnapEvent, напрямую соответствуют значению свойства CSS scroll-snap-type, заданного для контейнера прокрутки:

• Если ось привязки задана как block (или физическое значение оси, эквивалентное block в текущем режиме написания), только snapTargetBlock возвращает ссылку на элемент.
• Если ось привязки задана как inline (или физическое значение оси, эквивалентное inline в текущем режиме написания), только snapTargetInline возвращает ссылку на элемент.
• Если ось привязки задана как both, snapTargetBlock и snapTargetInline возвращают ссылку на элемент.

SnapEvent() Экспериментальная

Создаёт новый экземпляр объекта SnapEvent.

Наследует свойства от родительского класса, Event.

snapTargetBlock Только для чтения Экспериментальная

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

snapTargetInline Только для чтения Экспериментальная

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

В следующем фрагменте обработчика событий scrollsnapchanging мы устанавливаем атрибут class элемента snapTargetBlock в значение pending с помощью свойства Element.className, что может использоваться для стилизации элемента по-другому, когда он становится ожидаемой целью привязки.

Обратите внимание, что этот обработчик предназначен для установки на контейнер прокрутки по направлению в столбец (вертикальная прокрутка, если страница настроена на горизонтальное writing-mode), поэтому только элемент snapTargetBlock будет изменяться между срабатываниями нескольких событий. SnapEvent.snapTargetInline вернёт null, потому что привязка не происходит по направлению в строку.

scrollingElem.addEventListener("scrollsnapchanging", (event) => {
  // Set current pending snap target class to "pending"
  event.snapTargetBlock.className = "pending";

  // Logs the new pending block-direction snap target element
  console.log(event.snapTargetBlock);

  // Logs null; no inline snapping occurs
  console.log(event.snapTargetInline);
});

В следующем фрагменте обработчика событий scrollsnapchange мы устанавливаем класс selected на элементе SnapEvent.snapTargetBlock, что может использоваться для стилизации только что выбранной целевой привязки, чтобы она выглядела выбранной (например, с анимацией).

scrollingElem.addEventListener("scrollsnapchange", (event) => {
  event.snapTargetBlock.className = "selected";
});

• scrollsnapchanging событие
• scrollsnapchange событие
• Модуль CSS прокрутки с привязкой
• Использование событий прокрутки с привязкой
• События прокрутки с привязкой на developer.chrome.com (2024)