Interaction
scroll-margin
scroll-margin sets how much room to leave around an element when scrolling snaps to it or a link jumps to it. It shifts where each element comes to rest.
Syntax
<length>{1,4}Preview
Code
.box {
overflow: auto;
scroll-snap-type: y mandatory;
}
.box > :nth-child(2) {
scroll-snap-align: start;
scroll-margin: 24px;
}Controls
About
What the values mean
0: the initial value. Scrolling stops exactly at the element's border.- A length such as
24px: leaves that much room outside the element. A negative value stops inside the element.
As with margin, one to four values set the top, right, bottom, and left. Each side can also be set on its own, such as scroll-margin-top. % is not allowed.
The preview is a box that scrolls vertically with scroll-snap-type: y mandatory, and the property is set on the second card together with scroll-snap-align: start. With a positive value the second card stops that much below the top of the box; with a negative value its top edge is hidden above the box.
When to use it
Set it on headings that in-page links jump to, so that they do not end up under a fixed header, or to leave a little space above them.
Watch out
- The visible spacing (
margin) does not change. Only the position where snapping or a link jump comes to rest changes. - To shift everything from the box side, set
scroll-paddingon the scrolling box. When both are set, the offsets add up.