CSS scroll-snap-type attribute

Ορισμός και χρήση

scroll-snap-type Η ιδιότητα καθορίζει πώς το στοιχείο θα προσαρμοστεί στην εστίαση και την κατεύθυνση της προσαρμογής όταν σταματήσετε τη σωρόληψη.

To implement the snap scrolling behavior, you must 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 snap effect on the x axis:

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

Try It Yourself

Example 2: Snap Behavior on Both Axes

Sets snap effect on both the x and y axes. scroll-snap-type Attribute:

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





Try It Yourself

Example 3: Snap Behavior with Proximity

Sets snap effect with proximity behavior on both the x and y axes. 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 snap effect. Default value.
x Sets snap effect on the x axis.
y Sets snap effect on the y axis.
block Sets snap effect on the block direction.
inline Sets snap effect on the inline direction.
both Sets snap effect on both the x and y axes.
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 Production: 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 attribute.

Chrome Edge Firefox Safari Opera
69.0 79.0 99.0 11.0 56.0

Σχετικές σελίδες

Αναφορά:CSS scroll-snap-align attribute