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

Related

• scroll-padding
• scroll-margin
• scroll-snap-align
• scroll-snap-stop

Resources

• CSS Scroll Snap W3C Candidate Recommendation
• Practical CSS Scroll Snapping
• Introducing CSS Scroll Snap Points