Документ: событие scrollsnapchanging

Ограниченная доступность

Эта функция не относится к Baseline, так как она не работает во всех широко используемых браузерах.

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

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

Это событие работает аналогично событию Element интерфейса scrollsnapchanging, за исключением того, что весь HTML-документ должен быть установлен в качестве контейнера прокрутки (то есть, свойство scroll-snap-type задается для элемента <html>).

Синтаксис

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

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

onscrollsnapchanging = (event) => {};

Тип события

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

Примеры

Базовое использование

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

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

Элемент <main> можно превратить в контейнер прокрутки, используя комбинацию свойств CSS, например:

main {
  width: 250px;
  height: 450px;
  overflow: scroll;
}

Затем мы можем реализовать поведение привязки к прокрутке для содержимого прокрутки, указав свойство scroll-snap-type для элемента <html>:

html {
  scroll-snap-type: block mandatory;
}

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

document.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 и удаляем его, чтобы стилизировался только последний целевой элемент привязки.

Спецификации

Спецификация
Модуль CSS Scroll Snap Level 2 # scrollsnapchanging

Совместимость с браузерами

	Рабочие столы					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на iOS	Samsung Internet	WebView Android
`scrollsnapchanging_event`	129	129	Нет	115	Нет	129	Нет	86	Нет	Нет	129

См. также

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

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/Document/scrollsnapchanging_event