CSS scroll-padding-bottom Property

Description

The scroll-padding-bottom property controls the bottom inset of a scroll container’s snapport — the visible region used by the scroll snapping algorithm — by reserving extra space at the container’s bottom for alignment purposes. It does not change the layout or box model of the content itself; instead it shifts where snap positions and target elements are considered “aligned” relative to the viewport of the scroll container. In practice, this means the final position an element snaps to can be offset upward from the physical bottom edge of the container so that content isn’t flush against or hidden by other UI elements.

When you use CSS scroll snapping, the reserved scroll padding interacts directly with the snapping algorithm so that elements with snap points land at a comfortable visual offset. This is useful when combined with properties that enable snapping behavior such as scroll-snap-type and when defining per-element alignment with scroll-snap-align. By adjusting the bottom inset you can ensure snapped items align where you expect visually without altering the element’s own margins or position.

It’s important to distinguish scroll-padding-bottom from layout padding: the regular padding-bottom changes the box model and the space inside the element, while scroll-padding-bottom only changes how the scroll container treats the endpoint for snapping and scroll-position calculations. If you prefer to work with logical properties that adapt to writing modes, the equivalent logical control is available via scroll-padding-block-end, which will map to the appropriate side in vertical or horizontal writing modes.

Typical use cases include offsets for sticky footers or UI chrome so that snapped content isn't obscured, creating breathing room at the end of a list when snapping items to view, and fine-tuning the user experience of paged or carousel-like scroll containers. Because it only affects how the scroll port interprets snap positions, you can use it alongside layout positioning (for example, elements positioned with position) or smooth scrolling behavior to craft a predictable and polished scroll interaction without altering content sizing.

Definition

Initial value: auto
Applies to: scroll containers
Inherited: no
Computed value: as specified
Animatable: by computed value type
JavaScript syntax: object.style.scrollPaddingBottom

Interactive Demo

scroll-padding-bottom: 0;

scroll-padding-bottom: 20px;

scroll-padding-bottom: 2em;

1

2

3

Scroll »

Syntax

scroll-padding-bottom: 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>

  <div class='demo'>

    <div class='scroller' tabindex='0'>

      <nav class='links'>

        <a href='#s1'>Section 1</a>

        <a href='#s2'>Section 2</a>

        <a href='#s3'>Section 3</a>

        <a href='#s4'>Section 4</a>

        <a href='#s5'>Section 5</a>

      </nav>



      <section id='s1' class='panel'>

        <h2>Section 1</h2>

        <p>This is the first panel.</p>

      </section>



      <section id='s2' class='panel'>

        <h2>Section 2</h2>

        <p>This is the second panel.</p>

      </section>



      <section id='s3' class='panel'>

        <h2>Section 3</h2>

        <p>This is the third panel.</p>

      </section>



      <section id='s4' class='panel'>

        <h2>Section 4</h2>

        <p>This is the fourth panel.</p>

      </section>



      <section id='s5' class='panel'>

        <h2>Section 5</h2>

        <p>This is the fifth panel.</p>

      </section>

    </div>



    <footer class='footer'>Sticky footer (80px tall)  -  covers content</footer>

  </div>

</body>

CSS

/* Basic layout and reset */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: system-ui, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
  background: #f4f6f8;
  color: #0b1a2b;
  padding: 20px;
  height: 100vh;
  display: flex;
  align-items: stretch;
}

.demo {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0; /* allow children to scroll */
}

/* Scroll container */
.scroller {
  flex: 1 1 auto;
  overflow-y: auto;
  background: #fff;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 6px 18px rgba(15, 31, 47, 0.06);

  /* Enable scroll snapping on the y axis */
  scroll-snap-type: y mandatory;

  /* Important: reserve 80px at the bottom of the scrollport
     so snapped targets or fragment navigation won't be hidden
     by the sticky footer */
  scroll-padding-bottom: 80px;
}

.links {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}

.links a {
  text-decoration: none;
  color: #0366d6;
  background: #eaf4ff;
  padding: 8px 10px;
  border-radius: 8px;
  font-weight: 600;
}

.panel {
  height: 260px;
  scroll-snap-align: start;
  border-radius: 10px;
  padding: 18px;
  margin-bottom: 14px;
  background: linear-gradient(180deg, #ffffff 0%, #f3fbff 100%);
  border: 1px solid #e3eefb;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.panel h2 {
  margin-bottom: 8px;
  font-size: 20px;
}

.footer {
  position: fixed;
  left: 20px;
  right: 20px;
  bottom: 20px;
  height: 80px;
  background: #023047;
  color: #fff;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 12px 36px rgba(2, 48, 71, 0.32);
  pointer-events: none; /* let clicks pass through for the demo */
}

/* Small responsive tweak */
@media (max-width: 480px) {
  .panel { height: 220px; }
  .links { flex-wrap: wrap; }
}

Result

Editor

Browser Support

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