CSS scroll-snap-align property

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;

start

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

scroll-snap-align: start;

end

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

scroll-snap-align: end;

center

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

scroll-snap-align: center;

Applicable to

It applies to scroll containers.

#CSS digger
Was this article helpful?

 
×

Ctrl+D