Widely availableUseful when sequential content should land on clear stops, but only when snapping improves orientation rather than fighting control.
Interaction Widely available

Scroll snap

scroll-snap aligns scroll positions to snap points as users move through a container. It is useful for carousels, galleries, and slide-like reading experiences.

InteractionScrollingCarousels

Overview

scroll-snap aligns scroll positions to snap points as users move through a container. It is useful for carousels, galleries, and slide-like reading experiences.

Browser support

Feature Desktop Mobile
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
scroll-margin
69
79
90
14.1
69
14.5
Other
css.properties.scroll-margin-block

The scroll-margin-block shorthand property sets the scroll margins of an element in the block dimension.
69
79
68
15
69
15
css.properties.scroll-margin-block-end

The scroll-margin-block-end property defines the margin of the scroll snap area at the end of the block dimension that is used for snapping this box to the snapport. The scroll snap area is determined by taking the transformed border box, finding its rectangular bounding box (axis-aligned in the scroll container's coordinate space), then adding the…
69
79
68
15
69
15
css.properties.scroll-margin-block-start

The scroll-margin-block-start property defines the margin of the scroll snap area at the start of the block dimension that is used for snapping this box to the snapport. The scroll snap area is determined by taking the transformed border box, finding its rectangular bounding box (axis-aligned in the scroll container's coordinate space), then adding the…
69
79
68
15
69
15
css.properties.scroll-margin-bottom

The scroll-margin-bottom property defines the bottom margin of the scroll snap area that is used for snapping this box to the snapport. The scroll snap area is determined by taking the transformed border box, finding its rectangular bounding box (axis-aligned in the scroll container's coordinate space), then adding the specified outsets.
69
79
68
14.1
69
14.5
css.properties.scroll-margin-inline

The scroll-margin-inline shorthand property sets the scroll margins of an element in the inline dimension.
69
79
68
15
69
15
css.properties.scroll-margin-inline-end

The scroll-margin-inline-end property defines the margin of the scroll snap area at the end of the inline dimension that is used for snapping this box to the snapport. The scroll snap area is determined by taking the transformed border box, finding its rectangular bounding box (axis-aligned in the scroll container's coordinate space), then adding the…
69
79
68
15
69
15
css.properties.scroll-margin-inline-start

The scroll-margin-inline-start property defines the margin of the scroll snap area at the start of the inline dimension that is used for snapping this box to the snapport. The scroll snap area is determined by taking the transformed border box, finding its rectangular bounding box (axis-aligned in the scroll container's coordinate space), then adding the…
69
79
68
15
69
15
css.properties.scroll-margin-left

The scroll-margin-left property defines the left margin of the scroll snap area that is used for snapping this box to the snapport. The scroll snap area is determined by taking the transformed border box, finding its rectangular bounding box (axis-aligned in the scroll container's coordinate space), then adding the specified outsets.
69
79
68
14.1
69
14.5
css.properties.scroll-margin-right

The scroll-margin-right property defines the right margin of the scroll snap area that is used for snapping this box to the snapport. The scroll snap area is determined by taking the transformed border box, finding its rectangular bounding box (axis-aligned in the scroll container's coordinate space), then adding the specified outsets.
69
79
68
14.1
69
14.5
css.properties.scroll-margin-top

The scroll-margin-top property defines the top margin of the scroll snap area that is used for snapping this box to the snapport. The scroll snap area is determined by taking the transformed border box, finding its rectangular bounding box (axis-aligned in the scroll container's coordinate space), then adding the specified outsets.
69
79
68
14.1
69
14.5
css.properties.scroll-padding

The scroll-padding shorthand property sets scroll padding on all sides of an element at once. It specifies offsets that define the optimal viewing region of a scrollport within a scroll container.
69
79
68
14.1
69
14.5
css.properties.scroll-padding-block

The scroll-padding-block shorthand property sets the scroll padding of an element in the block dimension.
69
79
68
15
69
15
css.properties.scroll-padding-block-end

The scroll-padding-block-end property defines offsets for the end edge in the block dimension of the optimal viewing region of the scrollport: the region used as the target region for placing things in view of the user. This allows the author to exclude regions of the scrollport that are obscured by other content (such as fixed-positioned toolbars or…
69
79
68
15
69
15
CSS property
auto
69
79
68
15
69
15
Other
css.properties.scroll-padding-block-start

The scroll-padding-block-start property defines offsets for the start edge in the block dimension of the optimal viewing region of the scrollport: the region used as the target region for placing things in view of the user. This allows the author to exclude regions of the scrollport that are obscured by other content (such as fixed-positioned toolbars or…
69
79
68
15
69
15
CSS property
auto
69
79
68
15
69
15
auto
69
79
68
15
69
15
Other
css.properties.scroll-padding-bottom

The scroll-padding-bottom property defines offsets for the bottom of the optimal viewing region of the scrollport: the region used as the target region for placing things in view of the user. This allows the author to exclude regions of the scrollport that are obscured by other content (such as fixed-positioned toolbars or sidebars) or to put more breathing…
69
79
68
14.1
69
14.5
css.properties.scroll-padding-inline

The scroll-padding-inline shorthand property sets the scroll padding of an element in the inline dimension.
69
79
68
15
69
15
css.properties.scroll-padding-inline-end

The scroll-padding-inline-end property defines offsets for the end edge in the inline dimension of the optimal viewing region of the scrollport: the region used as the target region for placing things in view of the user. This allows the author to exclude regions of the scrollport that are obscured by other content (such as fixed-positioned toolbars or…
69
79
68
15
69
15
CSS property
auto
69
79
68
15
69
15
Other
css.properties.scroll-padding-inline-start

The scroll-padding-inline-start property defines offsets for the start edge in the inline dimension of the optimal viewing region of the scrollport: the region used as the target region for placing things in view of the user. This allows the author to exclude regions of the scrollport that are obscured by other content (such as fixed-positioned toolbars or…
69
79
68
15
69
15
CSS property
auto
69
79
68
15
69
15
auto
69
79
68
15
69
15
Other
css.properties.scroll-padding-left

The scroll-padding-left property defines offsets for the left of the optimal viewing region of the scrollport: the region used as the target region for placing things in view of the user. This allows the author to exclude regions of the scrollport that are obscured by other content (such as fixed-positioned toolbars or sidebars) or to put more breathing…
69
79
68
14.1
69
14.5
css.properties.scroll-padding-right

The scroll-padding-right property defines offsets for the right of the optimal viewing region of the scrollport: the region used as the target region for placing things in view of the user. This allows the author to exclude regions of the scrollport that are obscured by other content (such as fixed-positioned toolbars or sidebars) or to put more breathing…
69
79
68
14.1
69
14.5
css.properties.scroll-padding-top

The scroll-padding-top property defines offsets for the top of the optimal viewing region of the scrollport: the region used as the target region for placing things in view of the user. This allows the author to exclude regions of the scrollport that are obscured by other content (such as fixed-positioned toolbars or sidebars) or to put more breathing room…
69
79
68
14.1
69
14.5
CSS property
auto
69
79
68
11
69
11
Other
css.properties.scroll-snap-align

The scroll-snap-align property specifies the box's snap position as an alignment of its snap area (as the alignment subject) within its snap container's snap port (as the alignment container).
69
79
68
11
69
11
CSS property
center
69
79
68
11
69
11
end
69
79
68
11
69
11
none
69
79
68
11
69
11
start
69
79
68
11
69
11
Other
css.properties.scroll-snap-stop

The scroll-snap-stop CSS property defines whether or not the scroll container is allowed to "pass over" possible snap positions.
75
79
103
15
75
15
CSS property
always
75
79
103
15
75
15
normal
75
79
103
15
75
15
Other
css.properties.scroll-snap-type

The scroll-snap-type CSS property is set on a scroll container, opting it into scroll snapping by setting the direction and strictness of snap point enforcement within the snap port.
69
79
99
11
69
11
CSS property
block
69
79
68
11
69
11
both
69
79
68
11
69
11
inline
69
79
68
11
69
11
none
69
79
39
11
69
11
x
69
79
68
11
69
11
y
69
79
68
11
69
11
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)
Notes 3 item(s)
Limitation
  • This browser only partially implements this feature
Removed
  • This feature was removed in a later browser version (90)
Implementation note
  • The `scroll-margin` property can cause an element's visibility to be incorrectly calculated for `element.focus()`. See bug 1708303.
Notes 3 item(s)
Limitation
  • This browser only partially implements this feature
Implementation note
  • Previously available under a different name: scroll-snap-margin (11)
  • Before version 14.1, scroll margin is not applied for scrolls to fragment target or `scrollIntoView()`, see bug 189265.
Notes 3 item(s)
Limitation
  • This browser only partially implements this feature
Implementation note
  • Previously available under a different name: scroll-snap-margin (11)
  • Before version 14.5, scroll margin is not applied for scrolls to fragment target or `scrollIntoView()`, see bug 189265.
Notes 3 item(s)
Limitation
  • This browser only partially implements this feature
Implementation note
  • Previously available under a different name: scroll-snap-margin-bottom (11)
  • Before version 14.1, scroll margin is not applied for scrolls to fragment target or `scrollIntoView()`, see bug 189265.
Notes 3 item(s)
Limitation
  • This browser only partially implements this feature
Implementation note
  • Previously available under a different name: scroll-snap-margin-bottom (11)
  • Before version 14.5, scroll margin is not applied for scrolls to fragment target or `scrollIntoView()`, see bug 189265.
Notes 3 item(s)
Limitation
  • This browser only partially implements this feature
Implementation note
  • Previously available under a different name: scroll-snap-margin-left (11)
  • Before version 14.1, scroll margin is not applied for scrolls to fragment target or `scrollIntoView()`, see bug 189265.
Notes 3 item(s)
Limitation
  • This browser only partially implements this feature
Implementation note
  • Previously available under a different name: scroll-snap-margin-left (11)
  • Before version 14.5, scroll margin is not applied for scrolls to fragment target or `scrollIntoView()`, see bug 189265.
Notes 3 item(s)
Limitation
  • This browser only partially implements this feature
Implementation note
  • Previously available under a different name: scroll-snap-margin-right (11)
  • Before version 14.1, scroll margin is not applied for scrolls to fragment target or `scrollIntoView()`, see bug 189265.
Notes 3 item(s)
Limitation
  • This browser only partially implements this feature
Implementation note
  • Previously available under a different name: scroll-snap-margin-right (11)
  • Before version 14.5, scroll margin is not applied for scrolls to fragment target or `scrollIntoView()`, see bug 189265.
Notes 3 item(s)
Limitation
  • This browser only partially implements this feature
Implementation note
  • Previously available under a different name: scroll-snap-margin-top (11)
  • Before version 14.1, scroll margin is not applied for scrolls to fragment target or `scrollIntoView()`, see bug 189265.
Notes 3 item(s)
Limitation
  • This browser only partially implements this feature
Implementation note
  • Previously available under a different name: scroll-snap-margin-top (11)
  • Before version 14.5, scroll margin is not applied for scrolls to fragment target or `scrollIntoView()`, see bug 189265.
Notes 3 item(s)
Limitation
  • This browser only partially implements this feature
Removed
  • This feature was removed in a later browser version (14.1)
Implementation note
  • Scroll padding is not applied for scrolls to fragment target or `scrollIntoView()`, see bug 179379.
Notes 3 item(s)
Limitation
  • This browser only partially implements this feature
Removed
  • This feature was removed in a later browser version (14.5)
Implementation note
  • Scroll padding is not applied for scrolls to fragment target or `scrollIntoView()`, see bug 179379.
Notes 3 item(s)
Limitation
  • This browser only partially implements this feature
Removed
  • This feature was removed in a later browser version (14.1)
Implementation note
  • Scroll padding is not applied for scrolls to fragment target or `scrollIntoView()`, see bug 179379.
Notes 3 item(s)
Limitation
  • This browser only partially implements this feature
Removed
  • This feature was removed in a later browser version (14.5)
Implementation note
  • Scroll padding is not applied for scrolls to fragment target or `scrollIntoView()`, see bug 179379.
Notes 3 item(s)
Limitation
  • This browser only partially implements this feature
Removed
  • This feature was removed in a later browser version (14.1)
Implementation note
  • Scroll padding is not applied for scrolls to fragment target or `scrollIntoView()`, see bug 179379.
Notes 3 item(s)
Limitation
  • This browser only partially implements this feature
Removed
  • This feature was removed in a later browser version (14.5)
Implementation note
  • Scroll padding is not applied for scrolls to fragment target or `scrollIntoView()`, see bug 179379.
Notes 3 item(s)
Limitation
  • This browser only partially implements this feature
Removed
  • This feature was removed in a later browser version (14.1)
Implementation note
  • Scroll padding is not applied for scrolls to fragment target or `scrollIntoView()`, see bug 179379.
Notes 3 item(s)
Limitation
  • This browser only partially implements this feature
Removed
  • This feature was removed in a later browser version (14.5)
Implementation note
  • Scroll padding is not applied for scrolls to fragment target or `scrollIntoView()`, see bug 179379.
Notes 3 item(s)
Limitation
  • This browser only partially implements this feature
Removed
  • This feature was removed in a later browser version (14.1)
Implementation note
  • Scroll padding is not applied for scrolls to fragment target or `scrollIntoView()`, see bug 179379.
Notes 3 item(s)
Limitation
  • This browser only partially implements this feature
Removed
  • This feature was removed in a later browser version (14.5)
Implementation note
  • Scroll padding is not applied for scrolls to fragment target or `scrollIntoView()`, see bug 179379.
Notes 3 item(s)
Removed
  • This feature was removed in a later browser version (79)
Compatibility
  • Available with a vendor prefix: -ms- (12)
Implementation note
  • Edge supports an earlier draft of CSS Scroll Snap without axis values.
Notes 5 item(s)
Limitation
  • This browser only partially implements this feature
Removed
  • This feature was removed in a later browser version (99)
  • This feature was removed in a later browser version (68)
Implementation note
  • On macOS Monterey, scroll snapping does not complete reliably. See bug 1749352.
  • An earlier draft of CSS Scroll Snap without axis values.
Notes 2 item(s)
Compatibility
  • Available with a vendor prefix: -webkit- (9)
Implementation note
  • Older Safari versions support an earlier draft of CSS Scroll Snap without axis values.
Notes 2 item(s)
Compatibility
  • Available with a vendor prefix: -webkit- (9)
Implementation note
  • Older Safari on iOS versions support an earlier draft of CSS Scroll Snap without axis values.

Syntax

CSS 
.scroll-container {
  scroll-snap-type: x mandatory;
  overflow-x: auto;
  display: flex;
}

.scroll-container > .item {
  scroll-snap-align: start;
  flex: 0 0 100%;
}

Live demo

horizontalscroll Mandatory

Scroll Snap horizontalscroll mandatory demo.

PreviewFullscreen

verticalscroll Proximity

Scroll Snap verticalscroll proximity demo.

PreviewFullscreen

Center align

Scroll Snap Center align demo.

PreviewFullscreen

Use cases

  • Galleries and carousels

    Guide image or card scrollers so each item lands in a stable reading position.

  • Paged sections

    Create story-like or slide-like reading flows where each panel deserves a stable viewport stop.

Cautions

  • Aggressive snapping can feel restrictive if users want free scrolling or partial views.
  • Snap-based layouts should still work with keyboard, touch, and reduced-motion preferences.

Accessibility

  • Snapping should support orientation, not interfere with a user’s ability to control movement predictably.

Related links

Powered by web-features