Web4College

CSS scroll-snap-align property

src

Description

CSS scroll-snap-align represents the snap position of a box's snap area within container's snapport.


The snap area is the yellow rectangular box while red box represents container's snapport.

Syntax

scroll-snap-align : none | start | end | center

Property values

noneDefault

It does not specify any snap position.

scroll-snap-align: none;
Try it

start

The start side of the snap area (child element) touches the start side of container's snapport.

scroll-snap-align: start;
Try it

end

The end side of the snap area (child element) touches the end side of container's snapport.

scroll-snap-align: end;
Try it

center

The snap area (child element) is centered within container's snapport.

scroll-snap-align: center;
Try it

Applicable to

It applies to scroll containers.