scroll-snap-type

Avatar of Andy Adams
Andy Adams on (Updated on )

📣 Freelancers, Developers, and Part-Time Agency Owners: Kickstart Your Own Digital Agency with UACADEMY Launch by UGURUS 📣

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

ChromeFirefoxIEEdgeSafari
696811*7911

Mobile / Tablet

Android ChromeAndroid FirefoxAndroidiOS Safari
12212312211.0-11.2

Related

Resources