Свойство scroll-snap-align в CSS

Определение и использование

scroll-snap-align Свойство определяет, на哪个 позиции фокуса элемент будет привязан, когда вы остановите скролл.

Чтобы реализовать поведение привязки скролла, необходимо установить свойство на подэлементах scroll-snap-align свойство и устанавливается на родительском элементе scroll-snap-type свойство.

Пример

Пример 1

Когда пользователь останавливает прокрутку, ближайший элемент прилипает к центру位置:

div {
  scroll-snap-align: center;
}

Попробуйте сами

Пример 2: Библиотека изображений

scroll-snap-align Этот атрибут非常适合 для использования при прокрутке библиотеки изображений. Здесь направление прокрутки горизонтальное, способ прилипания выравнивания - по центру. Когда пользователь отпускает ползунок, ближайшее изображение прилипает к центру области прокрутки. Попробуйте кликнуть по изображению, затем использовать клавиши стрелок влево и вправо для прокрутки их просмотра:

#container > img {
  scroll-snap-align: none center;
}
Пекин Танцор Вuhan Тюльпан Ханчжоу

Попробуйте сами

alley bridge in jungle mountains man with camera Cinque Terre

Пример 3: Вертикальное выравнивание точки прилипания в блоковом направлении

При вертикальном скролле:scroll-snap-align Атрибут также может быть установлен в начало элемента в блоковом направлении:

#container > div {
  scroll-snap-align: start none;
}

Попробуйте сами

CSS синтаксис

scroll-snap-align: none|start|end|center|block inline|initial|inherit;

Значение свойства

Значение Описание
none Нет эффекта прилипания при скролле. Значение по умолчанию.
start При скролле по осям X и Y, элемент прилипает в начале.
end При скролле по осям X и Y, элемент прилипает в конце.
center При скролле по осям X и Y, элемент прилипает в центре.
block inline Двухзначный синтаксис. Первый значений определяет способ прилипания в блоковом направлении, второй - в строковом.
initial Установить этот атрибут в его значение по умолчанию. См. также: initial.
inherit Этот атрибут наследуется от родительского элемента. См. также: inherit.

Технические детали

Значение по умолчанию: none
Ингерит: Нет
Создание анимации: Не поддерживается. См. также:Свойства анимации.
Версия: CSS3
JavaScript синтаксис: object.style.scrollSnapAlign="start"

Поддержка браузерами

Числа в таблице указывают на версию первого браузера, который полностью поддерживает этот атрибут.

Chrome Edge Firefox Safari Opera
69.0 79.0 68.0 11.0 56.0

Соответствующие страницы

См. также:Свойство scroll-snap-type в CSS