CSS scroll-padding-bottom Property

What You’ll Learn

The scroll-padding-bottom property insets the scrollport at the bottom edge of a scroll container. It helps ensure content is not too close to the bottom when scrolling or scroll snapping.

Introduction

The scroll-padding-bottom property in CSS is part of the CSS Scroll Snap Module. It allows you to define inset at the bottom of a scroll container’s scrollport, ensuring that content is not too close to the bottom edge when it is scrolled into view.

This property is especially useful for improving the readability and usability of content within scrollable containers.

Definition and Usage

Apply scroll-padding-bottom to the scroll container — such as html or an element with overflow: auto and scroll snapping enabled.

It is one longhand of the scroll-padding shorthand. Use it when only the bottom side of the scrollport needs inset.

📝 Syntax

The syntax for the scroll-padding-bottom property is straightforward. It can be applied to any scroll container.

element {
  scroll-padding-bottom: length | percentage | auto;
}

Basic Example

.scroll-container {
  scroll-padding-bottom: 20px;
}

Related Properties

• scroll-padding-top, scroll-padding-left, scroll-padding-right
• scroll-padding — shorthand for all four sides
• scroll-padding-block-end — logical block-end inset

🎯 Default Value

The default value of the scroll-padding-bottom property is auto, which means the user agent determines the padding based on its default settings unless you specify a length or percentage.

💎 Property Values

When to Use scroll-padding-bottom

scroll-padding-bottom helps when the bottom side of the scrollport needs inset:

• Fixed footers — Inset the scrollport so bottom content is not hidden under fixed UI.
• Last snap panel — Add space below the final snap stop in a scroller.
• Scroll containers — Prevent snapped content from sitting flush against the container bottom.
• Overflow panels — Keep the last line of content visible above the scroll box edge.

For logical block-axis inset, consider scroll-padding-block-end instead. For the top edge, use scroll-padding-top.

Examples Gallery

Start with the reference scroll container example, inset a snap scroller at the bottom, add page bottom inset for fixed footers, and use the longhand alone on a scroll box.

<style>
  .scroll-container {
    height: 200px;
    overflow-y: scroll;
    scroll-padding-bottom: 20px;
  }

  .content {
    height: 600px;
    background: linear-gradient(to bottom, #ffcc00, #ff6600);
  }
</style>

<div class="scroll-container">
  <div class="content">
    Scroll down to see the padding effect at the bottom.
  </div>
</div>

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

html {
  scroll-padding-bottom: 2rem;
}

.scroll-panel {
  scroll-padding-bottom: 3rem;
}

scroll-padding-bottom in the family

scroll-padding-bottom is the bottom longhand of scroll-padding. For the opposite side, see scroll-padding-top.

/* These are equivalent when only the bottom matters */
.a { scroll-padding-bottom: 2rem; }
.b { scroll-padding: 0 0 2rem 0; }

💡 Best Practices