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.
From web4college, the free CSS digger
▾
×
Bookmark this page
Ctrl+D
