Элемент: событие scrollsnapchange

Событие scrollsnapchange интерфейса Element срабатывает в элементе-контейнере прокрутки по завершении операции прокрутки, когда выбран новый целевой элемент прокрутки, непосредственно перед срабатыванием соответствующего события scrollend.

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

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

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

onscrollsnapchange = (event) => {};

Тип SnapEvent, который наследуется от универсального типа Event.

Предположим, у нас есть элемент <main> с важным содержимым, которое вызывает прокрутку:

<main>
  <!-- Significant content -->
</main>

Элемент <main> можно преобразовать в контейнер прокрутки, который будет прокручиваться к своим дочерним элементам, используя комбинацию свойства CSS scroll-snap-type и других свойств. Например:

main {
  width: 250px;
  height: 450px;
  overflow: scroll;
  scroll-snap-type: block mandatory;
}

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

const scrollingElem = document.querySelector("main");

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

• scrollsnapchanging событие
• scrollend событие
• SnapEvent
• CSS scroll-snap-type свойство
• Модуль CSS scroll snap
• Использование событий scroll snap
• События Scroll Snap на developer.chrome.com (2024)