CSS scroll-snap-type property

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;

x

The scroll container snaps to horizontal snap position.

scroll-snap-type: x;

y

The scroll container snaps to vertical snap position.

scroll-snap-type: y;

block

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

scroll-snap-type: block;

inline

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

scroll-snap-type: inline;

mandatory

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

scroll-snap-type: mandatory;

proximity

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

scroll-snap-type: proximity;

Applicable to

It applies to scroll containers.

#CSS digger
Was this article helpful?

 
×

Ctrl+D