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

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

scroll-snap-type Атрибут определяет, как элемент будет прилипать к фокусу и в каком направлении, когда вы停止 скроллинг.

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

Пример

Пример 1

Устанавливает функцию прилипания к точкам прилипания по оси x:

#container {
  scroll-snap-type: x mandatory;
}

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

Пример 2: Установка эффекта прилипания на осях x и y

Устанавливает эффект прилипания на осях x и y. scroll-snap-type Атрибут:

#container > div {
  scroll-snap-type: both mandatory;
}





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

Пример 3: Эффект прилипания с邻近ностью

Устанавливает эффект прилипания с邻近ностью на осях x и y. scroll-snap-type Атрибут. При использовании этого значения, если скроллинг останавливается точно в середине двух элементов,吸附 не будет выполняться:

#container > div {
  scroll-snap-type: both proximity;
}





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

CSS синтаксис

scroll-snap-type: none|x|y|block|inline|both|mandatory|proximity|initial|inherit;

Значение атрибута

Значение Описание
none Нет эффекта прилипания к точкам прилипания. Значение по умолчанию.
x Устанавливает эффект прилипания к точкам прилипания по оси x.
y Устанавливает эффект прилипания к точкам прилипания по оси y.
block Устанавливает эффект прилипания к точкам прилипания в направлении блока.
inline Устанавливает эффект прилипания к точкам прилипания в направлении строки.
both Устанавливает эффект прилипания к точкам прилипания на оси x и y.
mandatory После завершения скроллинга прокрутка автоматически перемещается к точке прилипания.
proximity

Похож на mandatory, но не так строг.

После завершения скроллинга прокрутка автоматически перемещается к точке прилипания, но между точками прилипания есть зона без эффекта прилипания.

зависит от параметров браузера.
initial Этот атрибут устанавливается в значение по умолчанию. См. также initial.
inherit Этот атрибут наследуется от родительского элемента. См. также inherit.

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

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

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

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

Кروм Эдж Фаерфокс Сафари Опера
69.0 79.0 99.0 11.0 56.0

См. также страницы:

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