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

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

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

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

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

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

onscrollsnapchanging = (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 заставит событие scrollsnapchanging сработать в элементе <main>, когда один из его дочерних элементов станет потенциальной целью привязки. В функции обработчика мы устанавливаем класс pending для дочернего элемента, на который ссылается свойство snapTargetBlock, что можно использовать для стилизации его по-другому при срабатывании события.

scrollingElem.addEventListener("scrollsnapchanging", (event) => {
  // remove previously-set "pending" classes
  const pendingElems = document.querySelectorAll(".pending");
  pendingElems.forEach((elem) => {
    elem.classList.remove("pending");
  });

  // Set current pending snap target class to "pending"
  event.snapTargetBlock.classList.add("pending");
});

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

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