CSS scroll-padding Property

If this site has been useful, we’d love your support! Consider buying us a coffee to keep things going strong!

Description

The scroll-padding property controls the inset of a scroll container’s “snap area” or effective scrollport — essentially shifting the area that the browser considers when aligning scrolled content into view. Rather than changing the box model or the layout of children, it modifies the region used by scrolling algorithms so that when an element is snapped or programmatically brought into view it appears offset from the container edges by the specified inset. This makes it possible to reserve visual space (for example, for a fixed header) without altering the element’s own padding or margin.

When used with scroll snapping, scroll-padding directly affects how and where items land relative to the container. It works together with snapping properties like scroll-snap-align and the container-level scroll-snap-type to determine the final position of snapped elements. Conceptually it is the container-side counterpart to element-side offsets such as scroll-margin, and it can be applied in logical axes via longhand properties like scroll-padding-block. Unlike regular padding, which affects layout and hit-testing, scroll-padding only alters scrolling alignment and snap calculations.

In practice, scroll-padding is useful for improving the visual result of in-page navigation and for creating comfortable snap positions. For example, it prevents content from being hidden under sticky headers when you jump to an anchor or call element.scrollIntoView, since the browser will treat the inset as reserved space. It also cooperates with scroll behaviors such as scroll-behavior, but it does not change how overflow is computed or how elements are sized — it simply shifts the target area the scrolling algorithms use. Because of that separation, you can adjust the perceived scroll destination without affecting the layout or flow of content.

Definition

Initial value: See individual properties
Applies to: scroll containers
Inherited: no
Computed value: See individual properties
Animatable: by computed value type
JavaScript syntax: object.style.scrollPadding

Interactive Demo

scroll-padding: 0;

scroll-padding: 20px;

scroll-padding: 2em;

Scroll »

Syntax

scroll-padding: auto | <length-percentage [0,∞]>

Values

autoThe offset is determined by the user agent. This will generally be 0px, but the user agent is free to detect and do something else if a non-zero value is more appropriate.
<length-percentage>An inwards offset from the corresponding edge of the scrollport, as a valid <length> or a <percentage>.

Example

HTML

<body>

  <header class="site-header">

    <nav class="nav">

      <a href="#section1">Section 1</a>

      <a href="#section2">Section 2</a>

      <a href="#section3">Section 3</a>

    </nav>

  </header>



  <main class="content">

    <section id="section1" class="panel">

      <h2>Section 1</h2>

      <p>This is the first section. Click the links in the header to jump between sections. The browser will respect the scroll-padding-top so the heading isn't hidden behind the fixed header.</p>

    </section>



    <section id="section2" class="panel">

      <h2>Section 2</h2>

      <p>Another section with enough height to demonstrate scrolling behavior.</p>

    </section>



    <section id="section3" class="panel">

      <h2>Section 3</h2>

      <p>Final section. Use the header links to test smooth scrolling and the scroll-padding offset.</p>

    </section>

  </main>

</body>

CSS

/* Basic reset */
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  line-height: 1.4;
  color: #111827;
}

/* Fixed header */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 64px;
  background: linear-gradient(90deg, #4f46e5, #06b6d4);
  display: flex;
  align-items: center;
  padding: 0 20px;
  color: #ffffff;
  z-index: 10;
}

.nav a {
  color: #ffffff;
  margin-right: 16px;
  text-decoration: none;
  font-weight: 600;
}

.nav a:hover {
  opacity: 0.9;
}

/* IMPORTANT: use scroll-padding-top to offset in-page anchor navigation
   so target content isn't hidden behind the fixed header. */
:root {
  scroll-padding-top: 80px; /* offset matching or slightly larger than header height */
  /* shorthand example: scroll-padding: 80px 0 0 0; */
}

/* Ensure page content starts below the fixed header visually */
.content {
  padding-top: 80px; /* same value as scroll-padding-top to avoid overlap */
}

.panel {
  min-height: 80vh;
  padding: 28px 20px;
  border-bottom: 1px solid #e6e9ef;
  background: #ffffff;
}

.panel h2 {
  margin-top: 0;
}

/* Smooth scrolling for a nicer demo */
html {
  scroll-behavior: smooth;
}

Result

Editor

Browser Support

The following information will show you the current browser support for the CSS scroll-padding property. Hover over a browser icon to see the version that first introduced support for this CSS property.