Skip to main content
Home / CSS Almanac / Properties / S / scroll-snap-type

scroll-snap-type

The scroll-snap-type property is part of the CSS Scroll Snap Module. Scroll snapping refers to "locking" the position of the viewport to specific elements on the page as the window (or a scrollable container) is scrolled. Think of it like putting a magnet on top of an element that sticks to the top of the viewport and forces the page to stop scrolling right there.

This is useful if you want to stop the browser at specific points on the page. For example: A user browsing a photo gallery probably doesn't want to scroll halfway past an image — they'd likely prefer to have the image "snap" to the right position as they scroll. Scroll snapping gives developers a pure-CSS way to handle this behavior.

scroll-snap-type is a required property on any scrollable container you want to add scroll snapping to. It answers three questions for a scroll container:

  1. Does the container use scroll snapping?
  2. On which axis — x (horizontal), y (vertical), block, or inline — should scroll snapping apply?
  3. How should scroll snapping behave? Is it forced 100% of the time, or does it take effect only when the user gets "close enough" to a snap position? More on this later.
.scroll-container {
  /* Always force (mandatory) scrolling to a snap point on the y-axis */
  scroll-snap-type: y mandatory;
}

Syntax

scroll-snap-type: none | [ x | y | block | inline | both ] [ mandatory | proximity ]

Values

scroll-snap-type accepts the following values:

  • none disables scroll snapping.
  • x enables scroll snapping along the x-axis only.
  • y enables scroll snapping along the y-axis only.
  • block enables scroll snapping along the block-axis only.
  • inline enables scroll snapping along the inline-axis only.
  • both enables scroll snapping along both axes (which you can think of as x and y, or inline and block.
  • mandatory is a strictness value which tells the browser to always go to a snap position when there isn't scrolling happening.
  • proximity is a strictness value which tells the browser to go to a snap position if a scrolling action gets pretty close to a snap position. If it's not pretty close, then the browser shouldn't snap and scrolling will behave normally.

Example

See the Pen scroll-snap-type example
by CSS-Tricks (@css-tricks) on CodePen.

Browser Support

This browser support data is from Caniuse, which has more detail. A number indicates that browser supports the feature at that version and up.

Desktop

ChromeOperaFirefoxIEEdgeSafari
69No6911*7511

Mobile / Tablet

iOS SafariOpera MobileOpera MiniAndroidAndroid ChromeAndroid Firefox
11.0-11.2NoNo677466

Related

Resources

icon-link icon-logo-star icon-search icon-star