Окно: событие scrollsnapchange

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

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

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

Событие scrollsnapchange интерфейса Window срабатывает в объекте window в конце операции прокрутки, когда выбирается новая цель прокрутки с привязкой.

Это событие работает примерно так же, как событие Element интерфейса scrollsnapchange, за исключением того, что весь 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, что может быть использовано для стилизации его так, чтобы он выглядел выбранным (например, с анимацией) при срабатывании события.

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

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

Спецификация
CSS Модуль прокрутки с привязкой, уровень 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/Window/scrollsnapchange_event