The CSS scroll-snap-align property

Definition and Usage

scroll-snap-align The attribute specifies the position to which the element will snap when you stop scrolling.

To achieve the scroll snap behavior, you must set the attribute on the child elements scroll-snap-align attribute, and set it on the parent element scroll-snap-type Attribute.

Instance

Example 1

Snap the nearest element to the center position when the user stops scrolling:

div {
  scroll-snap-align: center;
}

Try it yourself

Example 2: Image gallery

scroll-snap-align This attribute is very suitable for use in scrolling through image galleries. Here, the scrolling direction is horizontal, and the snap alignment is centered. When the user releases the scroll bar, the nearest image will snap to the center of the scrollable area. Try clicking on an image, then use the left and right arrow keys to scroll through them:

#container > img {
  scroll-snap-align: none center;
}
Beijing Dancer Wuhan Tulip Hangzhou

Try it yourself

alley bridge in jungle mountains man with camera Cinque Terre

Example 3: Align the snap position vertically in the block direction

When scrolling vertically,scroll-snap-align The attribute can also be set to the starting position of the element in the block direction:

#container > div {
  scroll-snap-align: start none;
}

Try it yourself

CSS syntax

scroll-snap-align: none|start|end|center|block inline|initial|inherit;

Attribute value

Value Description
none No snap effect. Default value.
start Snap to the start of the element on the x-axis and y-axis.
end Snap to the end of the element on the x-axis and y-axis.
center Snap to the center of the element on the x-axis and y-axis.
block inline Dual-value syntax. The first value specifies the snap mode in the block direction, and the second value specifies the snap mode in the inline direction.
initial Sets this property to its default value. See initial.
inherit Inherits this property from its parent element. See inherit.

Technical details

Default value: none
Inheritance: No
Animation production: Not supported. See:Animation-related properties.
Version: CSS3
JavaScript syntax: object.style.scrollSnapAlign="start"

Browser support

The numbers in the table represent the browser version that first fully supports this property.

Chrome Edge Firefox Safari Opera
69.0 79.0 68.0 11.0 56.0

Related pages

Reference:The CSS scroll-snap-type property