CSS scroll-snap-stop Property
Description
The scroll-snap-stop
CSS property is used to control the scrolling behavior of elements within a scroll container with snap points. When applied to an element, it indicates that the scrolling should "stop" or "snap" at that particular element when the user is scrolling through the container. This means that when a user scrolls, the container will align itself in a way that the element with scroll-snap-stop becomes fully visible, providing a smooth and precise scrolling experience. This property is particularly useful in web design when you want to create a gallery or slider with distinct snap points for user interaction, enhancing the overall user experience.
- Initial value
- normal
- Applies to
- all elements
- Inherited
- no
- Computed value
- as specified
- Animatable
- discrete
- JavaScript syntax
- object.style.scrollSnapStop
Interactive Demo
The effect of this property can be noticed on devices with a touchpad. Try to scroll through all items with a single swing. Value 'normal' should pass through all pages, while 'always' will stop at the second page.
Syntax
scroll-snap-stop: normal | always
Values
- normalWhen the visual viewport of this element's scroll container is scrolled, it may "pass over" possible snap positions.
- alwaysThe scroll container must not "pass over" a possible snap position; and must snap to the first of this elements' snap positions.
Example
<p>scroll-snap-stop: always (X Mandatory)</p>
<div class="x mandatory-scroll-snapping always-stop">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
<p>scroll-snap-stop: always (X Mandatory) on odd child elements</p>
<div class="x mandatory-scroll-snapping always-stop-odd">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
<p>scroll-snap-stop: always (X Mandatory) on even child elements</p>
<div class="x mandatory-scroll-snapping always-stop-even">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
<p>scroll-snap-stop: normal (X Mandatory)</p>
<div class="x mandatory-scroll-snapping normal-stop">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
<p>scroll-snap-stop: always (Y Mandatory)</p>
<div class="y mandatory-scroll-snapping always-stop">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
<p>scroll-snap-stop: normal (Y Mandatory)</p>
<div class="y mandatory-scroll-snapping normal-stop">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
/* setting up mandatory scroll-snap on parent */
.x.mandatory-scroll-snapping {
scroll-snap-type: x mandatory;
}
.y.mandatory-scroll-snapping {
scroll-snap-type: y mandatory;
}
/* defining scroll-snap alignment on children */
div > div {
scroll-snap-align: center;
}
/* defining scroll-snap stop on children */
.always-stop > div {
scroll-snap-stop: always;
}
.always-stop-odd > div:nth-of-type(odd) {
scroll-snap-stop: always;
}
.always-stop-even > div:nth-of-type(even) {
scroll-snap-stop: always;
}
.normal-stop > div {
scroll-snap-stop: normal;
}
Browser Support
The following table will show you the current browser support for the CSS scroll-snap-stop
property.
Desktop | |||||
79 | 69 | 68 | 56 | 11 |
Tablets / Mobile | |||||
69 | 68 | 48 | 11 | 10 | 69 |
Last updated by CSSPortal on: 3rd January 2024