CSS scroll-snap-type property

Definition and Usage

scroll-snap-type The attribute specifies how an element will snap to focus and the direction of the snap when you stop scrolling.

To implement the scroll snap behavior, it is necessary to set the attribute on the parent element. scroll-snap-type Attribute, and set it on the child elements scroll-snap-align Attribute.

Instance

Example 1

Sets scroll snap functionality on the x-axis:

#container {
  scroll-snap-type: x mandatory;
}

Try it yourself

Example 2: Set snap behavior on both the x-axis and y-axis

Sets both the x-axis and y-axis with snap behavior. scroll-snap-type Attribute:

#container > div {
  scroll-snap-type: both mandatory;
}





Try it yourself

Example 3: Snap behavior with proximity

scroll snap effect with proximity behavior on both the x-axis and y-axis. scroll-snap-type Attribute. When this attribute value is used, if the scrolling operation stops exactly in the middle of two elements, the snap will not occur:

#container > div {
  scroll-snap-type: both proximity;
}





Try it yourself

CSS Syntax

scroll-snap-type: none|x|y|block|inline|both|mandatory|proximity|initial|inherit;

Attribute value

Value Description
none No scroll snap effect. Default value.
x Sets scroll snap effect on the x-axis.
y Sets scroll snap effect on the y-axis.
block Sets scroll snap effect in the block direction.
inline Sets scroll snap effect in the inline direction.
both Sets scroll snap effect on both the x-axis and y-axis.
mandatory After the scrolling operation is completed, the scroll will automatically move to the snap point.
proximity

Similar to mandatory, but not as strict.

After the scrolling operation is completed, the scroll will automatically move to the snap point, but there is an area without snap effect between the snap points.

Depends on browser parameters.
initial Sets this property to its default value. See: initial.
inherit Inherits this property from its parent element. See: inherit.

Technical details

Default value: none
Inheritance: No
Animation creation: Not supported. See:Animation-related properties.
Version: CSS3
JavaScript Syntax: object.style.scrollSnapType="x mandatory"

Browser Support

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

Chrome Edge Firefox Safari Opera
69.0 79.0 99.0 11.0 56.0

Related Pages

Reference:CSS scroll-snap-align property