Window: событие scrollsnapchanging

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

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

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

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

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

window.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 модуль привязки прокрутки
Использование событий привязки прокрутки
События привязки прокрутки на 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/Window/scrollsnapchanging_event