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

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

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

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

Событие scrollsnapchange интерфейса Document срабатывает в контейнере прокрутки документа контейнер прокрутки в конце операции прокрутки, когда выбран новый целевой элемент прокрутки.

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

Синтаксис

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

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

onscrollsnapchange = (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 вызовет событие scrollsnapchange в документе HTML, когда дочерний элемент элемента <main> станет новым выбранным целевым элементом привязки. В обработчике функции мы устанавливаем класс selected для дочернего элемента, на который ссылается SnapEvent.snapTargetBlock, что может использоваться для форматирования его внешнего вида как выбранного (например, с анимацией) при срабатывании события.

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

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

Спецификация
CSS Scroll Snap Модуль 2 уровня # scrollsnapchange

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

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

См. также

scrollsnapchanging событие
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/Document/scrollsnapchange_event