UGURUS offers elite coaching and mentorship for agency owners looking to grow. Start with the free Agency Accelerator today.
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:
- Does the container use scroll snapping?
- On which axis — x (horizontal), y (vertical), block, or inline — should scroll snapping apply?
- 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.
/* Always force (mandatory) scrolling to a snap point on the y-axis */
scroll-snap-type: y mandatory;
scroll-snap-type: none | [ x | y | block | inline | both ] [ mandatory | proximity ]
scroll-snap-type accepts the following values:
nonedisables scroll snapping.
xenables scroll snapping along the x-axis only.
yenables scroll snapping along the y-axis only.
blockenables scroll snapping along the block-axis only.
inlineenables scroll snapping along the inline-axis only.
bothenables scroll snapping along both axes (which you can think of as
mandatoryis a strictness value which tells the browser to always go to a snap position when there isn’t scrolling happening.
proximityis 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.
This browser support data is from Caniuse, which has more detail. A number indicates that browser supports the feature at that version and up.
Mobile / Tablet