CSS scroll-snap-stop property

Definition and Usage

When swiping quickly on the touchpad or touchscreen,scroll-snap-stop attribute is used to specify whether scrolling directly skips elements or stops and吸附 to the next element.

To control the scrolling snap stop behavior, you must set the attribute on the child element to scroll-snap-stop and scroll-snap-align attribute, and also set scroll-snap-type attribute.

Note: You need to use the swipe gesture on a device with a touchpad or touchscreen to experience scroll-snap-stop Effect of the attribute.

Example

When swiping on the touchpad or touchscreen, force scrolling to stop and吸附 to the next element instead of skipping elements directly:

div {
  scroll-snap-stop: always;
}

Try It Yourself

CSS Syntax

scroll-snap-stop: normal|always|initial|inherit;

Attribute Value

Value Description
normal Default value. After a quick swipe on the touchpad or touchscreen, scrolling slows down gradually and skips multiple elements.
always After a quick swipe on the touchpad or touchscreen, scrolling stops and the next element is吸附 to the focus position.
initial Sets this property to its default value. See also initial.
inherit Inherits this property from its parent element. See also inherit.

Technical Details

Default Value: normal
Inheritance: No
Animation Creation: Not supported. See also:Animation-related Properties.
Version: CSS3
JavaScript Syntax: object.style.scrollSnapStop="always"

Browser Support

The numbers in the table represent the browser version that first fully supports this attribute.

Chrome Edge Firefox Safari Opera
75.0 79.0 103.0 15.0 62.0

Related Pages

Reference:CSS scroll-snap-align property

Reference:CSS scroll-snap-type property