`Scroll-snap-align` - CSS Property

scroll-snap-align

Summary of characteristics of the `scroll-snap-align` property

Quick description

Defines the alignment of the elements used as snaps in relation to the display window (scroll Snap technique).

Status

Standard

Applies to

All elements.

Usable for

HTML

Predefined values

none | start | center | end

Percentages

Not applicable.

Initial value

none

Inherited by default

No.

Animation type

Discrète: during an animation, the scroll-snap-align property passes from one value to another without transition.

Canonical order

Per grammar: serialization in the order of syntax.

W3C Module

CSS Scroll Snap Module

References (W3C)

CSS Scroll Snap Module - Level 1

Document status: CR (Candidate Recommendation)

Syntax diagram of `scroll-snap-align`.

Syntax diagram of the scroll-snap-align property.
The links in the diagram provide more details about the values.
Download the diagram in SVG.

Description of the `scroll-snap-align` property.

The property scroll-snap-align operates within the context of scrolling with snapping (see our tutorial on scrolling with snaps). It defines how the element that serves as a snap point should be aligned relative to the viewport.

scroll-snap-align is used on elements that serve as attachment points.

Also see the following properties:

overflow

Overflow management, when the content is too large for the dimensions imposed on the element.

scroll-snap-type

Defines the main characteristics of a scroll snap. To apply to a scrolling container.

scroll-snap-align

Defines the alignment of the elements used as snaps in relation to the display window (scroll Snap technique).

scroll-snap-stop

Allows you to force scrolling to stop on certain elements (Scroll-Snap).

scroll-margin

Defines the scroll margins of the scroll window in the context Scroll Snap.

scroll-padding

Sets the interior margins of the scroll window.

Values for `scroll-snap-align`.

scroll-snap-align: none;

The element is not considered a snap point. If no content element is defined as a snap point, scrolling will occur in the usual manner, without adjustment.

1

2

3

4

5

scroll-snap-align:none;

scroll-snap-align: start;

The start of the element aligns with the start of the viewport. The start of the element depends on the writing mode, depending on the language. See our explanations on writing modes.
So here is what the start value corresponds to for the main languages.

	Horizontal scrolling `scroll-snap-type:x;`	Vertical scrolling `scroll-snap-type:y;`
Latin languages	Left	Top
Arabic languages	Right	Top
CJK langages	Right	Top
Mongolian languages	Left	Top
Hebrew	Right	Bottom

In the examples below, the hooks are aligned to start, so to the left for Latin languages, and to the right for Arabic languages (second example), although scroll-snap-align is still set to start.

Latin languages

اللغة العربية

scroll-snap-align: end;

With the value end, the end of the element aligns with the end of the viewport. Depending on the language, the value end corresponds to:

	Horizontal scrolling `scroll-snap-type:x;`	Vertical scrolling `scroll-snap-type:y;`
Latin languages	Right	Bottom
Arabic languages	Left	Bottom
CJK langages	Left	Bottom
Mongolian languages	Right	Bottom
Hebrew	Left	Top

Latin languages

اللغة العربية

scroll-snap-align: center;

The center of the element aligns with the center of the viewport. This value is not dependent on the writing mode, as the center is the same regardless of the language.

1
2
3
4
5
scroll-snap-align: start center;

In principle, the syntax of scroll-snap-align expects two values. This is necessary when it is necessary to distinguish the direction of the blocks (first value) from the direction of the lines (second value). When only one value is specified, it applies to both directions.

The example below shows what happens with center alignment in the line direction (horizontal) and start alignment in the block direction (vertical).

A1
A2
A3
A4
A5

B1
B2
B3
B4
B5

C1
C2
C3
C4
C5

D1
D2
D3
D4
D5

E1
E2
E3
E4
E5
scroll-snap-align: initial; (none) scroll-snap-align: inherit; scroll-snap-align: revert; scroll-snap-align: revertLayer; scroll-snap-align: unset;

See the following pages for more details: initial, inherit, revert, revert-layer, unset.

Animation of the `scroll-snap-align` property.

The property scroll-snap-align can be animated. Its values being non-numeric, the property switches abruptly from one value to another.

Simulator.

To observe the effect of the scroll-snap-align property and its different values, scroll through the content using the scroll bar or the mouse wheel on a PC, or by swiping on a touchscreen.

scroll-snap-align :

none

start

center

end

Browsers compatibility with `scroll-snap-align`.

Support for scroll-snap-align is good on all current browsers.

Column 1

Support of scroll snap (when handling the scroll bars, the content stops at relevant points).

Column 2

Support for the property scroll-snap-align which defines whether the snap occurs at the start, center, or end of the element.

Scroll Snap

scroll-snap-align
property

Estimated overall support.

96%

95%

Browsers on computers :

Mobile browsers :

Outdated or marginal browsers :

Internet Explorer

UC Browser pour Androïd

Opéra Mobile

QQ Browser

Baidu Browser

Opéra

Samsung Internet

Firefox pour Androïd

Edge

Firefox

Chrome pour Androïd

Androïd Brower

Safari

Safari sur IOS

Chrome

KaiOS Browser

Opéra mini

See Caniuse.com for more compatibility information.

Caniuse

Historic of the `scroll-snap-align` property.