CSS scroll-margin attribute

Definition and Usage

scroll-margin This property specifies the distance between the snap position and the container.

This means that when you stop scrolling, the scroll will quickly adjust and stop at the specified distance from the snap position to the container.

Snap position refers to the position where the child element吸附 in the container when it stops scrolling.

scroll-margin This property is a shorthand for the following properties:

• scroll-margin-top
• scroll-margin-bottom
• scroll-margin-left
• scroll-margin-right

If the scroll-margin property has four values:

scroll-margin: 15px 30px 60px 90px;

• The top distance is 15px
• The right distance is 30px
• The bottom distance is 60px
• The left distance is 90px

If the scroll-margin property has three values:

scroll-margin: 15px 30px 60px;

• The top distance is 15px
• The distance on both sides is 30px
• The bottom distance is 60px

If the scroll-margin property has two values:

scroll-margin: 15px 30px;

• The distance at the top and bottom is 15px
• The distance on both sides is 30px

If the scroll-margin property has one value:

scroll-margin: 10px;

• The distance to all four directions is 10px

to see scroll-margin Property effects on the parent element must be set on the child element scroll-margin and scroll-snap-align Property, and set scroll-snap-type Property.

Note:In the following example, scroll margins are set for all sides, but due to scroll-snap-align The property is set to "start", so only the top scroll margin changes the scroll behavior.

Instance

Example 1

Set the scroll margin between the sticky position and the container to 20px:

div {
  scroll-margin: 20px;
}

Try it yourself

Example 2: Image gallery

scroll-margin The property can be used in image galleries with sticky behavior. Here,scroll-margin Allow the user to see another image on the left. Scroll past the first image to see the effect:

#container > img {
  scroll-margin: 0 0 0 30px;
}

Try it yourself

Example 3: Set the scroll margin at the bottom and right

Can be set at the bottom and right of the element scroll-margin Property. Scroll horizontally and vertically to the next element to see the effect:

#container > div {
  scroll-margin: 0 10px 30px 0;
}

Try it yourself

CSS syntax

scroll-margin: 0|value|initial|inherit;

Attribute value

Technical details

Browser support

The numbers in the table represent the first browser version to fully support this property.

Related pages

Reference:The CSS scroll-margin-bottom property

Reference:The CSS scroll-margin-left property

Reference:The CSS scroll-margin-right property

Reference:The CSS scroll-margin-top property

Reference:The CSS scroll-snap-align property

Reference:The CSS scroll-snap-type property