PLAY CSS
jaen

Interaction

scroll-padding

scroll-padding sets how far inside the edges of a scrolling box a snapped element or a link target comes to rest. Use it to keep targets from hiding under a fixed header.

Syntax

[ auto | <length-percentage [0,∞]> ]{1,4}

Preview

123
Presets
Drag the bottom-right corner to resize

Code

.box {
  overflow: auto;
  scroll-snap-type: y mandatory;
  scroll-padding: 24px;
}

.box > :nth-child(2) {
  scroll-snap-align: start;
}

Controls

scroll-padding
Same value for every side
scroll-padding24px
123

About

What the values mean

  • auto: the initial value. Usually the same as 0.
  • 24px or 10%: the distance from the edge of the box. % is relative to the width or height of the box.

As with padding, one to four values set the top, right, bottom, and left. Each side can also be set on its own, such as scroll-padding-top.

The preview is a box that scrolls vertically with scroll-snap-type: y mandatory, lining up the top of the second card with the top of the box (scroll-snap-align: start). With scroll-padding, the second card stops that much lower.

When to use it

On a page with a position: fixed or sticky header, set scroll-padding-top on html so that headings reached through in-page links do not end up under the header.

Watch out

  • Set it on the scrolling box. To shift individual elements inside it, set scroll-margin on them instead.
  • The visible spacing (padding) does not change. Only the position where snapping or a link jump comes to rest changes.
  • Negative values are not allowed.

References

MDN Web Docsscroll-paddingSpecificationCSS Scroll Snap Module Level 1Can I usescroll-padding

Comments

PLAY CSS