CSS привязка к прокрутке

Модуль CSS привязки к прокрутке предоставляет свойства, позволяющие управлять поведением прокрутки и панорамирования, определяя позиции привязки. Содержимое может привязываться к позиции по мере прокрутки пользователем содержимого, выходящего за пределы контейнера прокрутки, обеспечивая постраничную прокрутку и позиционирование прокрутки.

Этот модуль включает свойства scroll-padding для контейнера прокрутки, которые позволяют настроить оптимальную область просмотра при постраничной прокрутке во время операций скролла в область видимости. Он также включает scroll-margin и scroll-alignment, установленные для дочерних элементов контейнера прокрутки, чтобы настроить визуальную область дочерних элементов при прокрутке в область видимости, а также свойство для принудительной остановки прокрутки на отдельных дочерних элементах.

Привязка к прокрутке в действии

Чтобы увидеть привязку к прокрутке в поле ниже, прокрутите вверх-вниз и влево-вправо по сетке из 45 помеченных ящиков в области прокрутки. Нажмите «Воспроизвести» в примере ниже, чтобы просмотреть или изменить исходный код в MDN Playground:

При привязке к прокрутке один из пронумерованных блоков, к которому вы прокручиваете, встанет на свое место. Исходный CSS делает пронумерованный блок привязанным к центру области просмотра. Используйте ползунки, чтобы изменить блокирующее и линейное позиционирование привязки.

Используя свойства привязки, можно разрешить или заблокировать прокрутку мимо элемента (в данном случае пронумерованного блока). Выберите флажок «Запретить прокрутку мимо блоков», чтобы ограничить все действия прокрутки прокруткой к смежному блоку.

Чтобы сравнить привязку к прокрутке с обычной прокруткой, установите флажок «отключить привязку» и попробуйте прокрутить снова.

Справочник

Свойства для контейнеров

Свойства для дочерних элементов

События

scrollsnapchange Экспериментально
scrollsnapchanging Экспериментально

Интерфейсы

SnapEvent Экспериментально
- SnapEvent.snapTargetBlock Экспериментально
- SnapEvent.snapTargetInline Экспериментально

Руководства

Основные понятия CSS привязки к прокрутке: Обзор и примеры возможностей CSS привязки к прокрутке.
Использование событий привязки к прокрутке: Руководство по использованию событий scrollsnapchanging и scrollsnapchange привязки к прокрутке, которые срабатывают, когда браузер определяет, что новый целевой элемент привязки ожидается или выбран.

Связанные понятия

:target псевдокласс
overflow свойство CSS
Метод элемента scroll()
Метод элемента scrollBy()
Метод элемента scrollIntoView()
Метод элемента scrollTo()
Событие элемента scroll
Событие элемента scrollend
scrollbar роль ARIA
Термин "контейнер прокрутки" в глоссарии

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

Спецификация
CSS Модуль привязки к прокрутке уровень 1
CSS Модуль привязки к прокрутке уровень 2

См. также

Модуль CSS overflow
Модуль стилизации полос прокрутки CSS
Области прокрутки только с клавиатурой на adrianroselli.com (2022)
Примеры привязки к прокрутке на Codepen (2022)
Хорошо контролируемая прокрутка с помощью CSS привязки к прокрутке на web.dev (2021)
Практическая реализация CSS привязки к прокрутке на CSS-Tricks (2020)
CSS привязка к прокрутке на 12 Days of Web (2019)

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