Codectionary / Developer documentation / CSS

Insets for a Scrolling Region

scroll-padding describes an inset from a scroll container’s scrollport for relevant scroll positioning and snapping.

What it is and why to use it

scroll-padding describes an inset from a scroll container’s scrollport for relevant scroll positioning and snapping. It is useful when the container has a persistent header or needs breathing room around the item brought into view. It belongs to the scrolling container, while scroll-margin belongs to a target.

Common mistakes and limitations

scroll-padding does not increase the amount of scrollable content and cannot override the end of the scroll range. It is not a substitute for actual content padding. Nested scrollers and different navigation operations need testing.

Try the example

The example pairs editable CSS with its own HTML preview. Run it, then change one declaration at a time and compare the result. Locally, put the CSS in a style element in the document head or in an external stylesheet linked from the HTML. Feature support varies by browser and version; use the linked reference and a useful fallback where needed.

HTML used by this example

<a href="#unit">Jump to unit</a><div class="panel"><div class="spacer">Start</div><h3 id="unit">Unit heading</h3><div class="tail">More content</div></div>

Syntax

scroll-padding-block-start: 2rem;

Examples

Insets for a Scrolling Region

Run the CSS against the supplied HTML, then experiment with the values.

.panel { height: 10rem; overflow: auto; scroll-padding-block-start: 2rem; border: 1px solid #94a3b8; }
.spacer { height: 10rem; }
.tail { height: 12rem; }
  1. The panel is the scroll container and owns the inset.
  2. Following the fragment asks the browser to account for its preferred scrollport region.
  3. The inset does not create visible ordinary padding before every item. This is useful for a consistent offset shared by many targets.
HTML used by this example
<div class="demo"><a href="#unit">Jump to unit</a><div class="panel"><div class="spacer">Start</div><h3 id="unit">Unit heading</h3><div class="tail">More content</div></div></div>

Best practices

  • scroll-padding does not increase the amount of scrollable content and cannot override the end of the scroll range. It is not a substitute for actual content padding. Nested scrollers and different navigation operations need testing.
  • Inspect the relevant browser reference and test the browsers used by your audience.

Runtime & versions

Web browsers. Feature availability depends on the language and runtime version used by your project; consult the official reference below.

CSS specifications (modules)

Specifications & further reading