Web4College

CSS scroll-snap-type property

src

Description

CSS scroll-snap-type property specifies whether the container is scroll snap container, the axes to snap to, and strictness of snapping.

Syntax

scroll-snap-type : none   |   [ x | y | block | inline ]   [ mandatory | proximity]

Property values

noneDefault

The scroll container does not snap.

scroll-snap-type: none;
Try it

x

The scroll container snaps to horizontal snap position.

scroll-snap-type: x;
Try it

y

The scroll container snaps to vertical snap position.

scroll-snap-type: y;
Try it

block

The scroll container must snap to block snap position (vertical).

scroll-snap-type: block;
Try it

inline

The scroll container must snap to block snap position (horizontal).

scroll-snap-type: inline;
Try it

mandatory

The container must snap to snap position on termination of scrolling.

scroll-snap-type: mandatory;
Try it

proximity

It means the scroll container may snap to snap position on termination of scrolling operation.

scroll-snap-type: proximity;
Try it

Applicable to

It applies to scroll containers.