CSS scroll-snap-stop Property

❮ Previous Reference Next ❯

Example

.scroller > div {
  flex: 0 0 250px;
  width: 250px;
  background-color: #1A73E8;
  color: #fff;
  font-size: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}





1
2
3

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.


Meaning:

The scroll-snap-stop CSS property defines whether or not the scroll container is allowed to "pass over" possible snap positions.

Default value:normal
Inherited:No
Animatable:No
Version:CSS3
JavaScript syntax:
object.style.scrollSnapStop="normal|always|initial|inherit|revert|revert-layer|unset";



Standard Syntax

scroll-snap-stop: normal|always|initial|inherit|revert|revert-layer|unset;



Browser Support




Status







Property Values

The following table describes the values of this property:

Value Description
normal When the visual viewport of this element's scroll container is scrolled, it may "pass over" possible snap positions.
always The scroll container must not "pass over" a possible snap position; and must snap to the first of this elements' snap positions.
initial Sets this property to its default value.
inherit If specified, the associated element takes the computed value of its parent element animation-delay property.
revert Reverts the cascaded value of the property from its current value to the value the property
revert-layer Rollback styles to the ones specified in previous cascade layers.
unset Resets a property to its inherited value if the property naturally inherits from its parent, and to its initial value if not.



Default CSS Property Values

selectors {
  scroll-snap-stop: normal;
}
❮ Previous Reference Next ❯