CSS scroll-padding-bottom Property

This property sets the padding distance for the bottom of the scrollport, ensuring items snapped into view maintain a specific gap from the bottom edge.

selector { scroll-padding-bottom: value; }

auto	The browser determines the offset, which usually defaults to 0px.
<length>	Specifies a fixed distance from the bottom edge of the scrollport using units like px, em, or rem.
<percentage>	Specifies an offset as a percentage of the scroll container's height.

Code Examples

A basic scroll-snap container where each section stops 40px short of the bottom edge when snapped.

<style>
.scroll-holder {
  width: 300px;
  height: 200px;
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
  scroll-padding-bottom: 40px;
  border: 2px solid #333333;
}
.section {
  height: 200px;
  scroll-snap-align: end;
  background: #eeeeee;
  border-bottom: 1px solid #cccccc;
}
</style>
<div class="scroll-holder">
  <div class="section">Section 1</div>
  <div class="section">Section 2</div>
  <div class="section">Section 3</div>
</div>

An advanced implementation using JavaScript to dynamically adjust the scroll padding, useful for responsive UI changes.

<style>
#main-frame {
  height: 400px;
  overflow-y: auto;
  scroll-behavior: smooth;
  scroll-padding-bottom: 20px;
  background: #f4f4f4;
}
.content-block {
  height: 600px;
  padding: 20px;
  background: #ffffff;
}
</style>
<div id="main-frame">
  <div class="content-block">
    <button onclick="adjustPadding()">Increase Buffer</button>
    <p>Scroll down to see the effect.</p>
  </div>
</div>
<script>
function adjustPadding() {
  const frame = document.getElementById("main-frame");
  frame.style.scrollPaddingBottom = "100px";
  console.log("Bottom scroll padding updated to 100px for better visibility.");
}
</script>

Pro Tip

If you are building a single-page application with a floating action button at the bottom, use scroll-padding-bottom on your main container to ensure the last item in a list is never obscured by the button when the user scrolls to the end.

Deep Dive

Think of the scrollport as a camera lens. When you tell the browser to focus on a specific element at the bottom of the frame, scroll-padding-bottom acts like a physical spacer inside that lens. It prevents the element from bumping directly against the bottom edge of the container. This is primarily used in scroll-snap interfaces or when using the scroll-into-view functionality. Unlike standard padding which affects layout and element positioning, scroll-padding only affects the 'snap area' or the visible boundary during scrolling operations. It essentially tells the browser: "When you scroll down to show an item, leave this much breathing room at the bottom."

Best Practices

Apply this property to the parent scroll container, not the child elements themselves. It is best used in layouts where you have a fixed footer or a sticky UI element at the bottom of the screen that might overlap your content if you don't provide that extra offset. Using relative units like rem or vh is usually smarter than hard-coded pixels to ensure the UI remains flexible across different screen sizes.

Common Pitfalls

The biggest mistake is confusing scroll-padding-bottom with scroll-margin-bottom. Scroll-padding goes on the parent container to define the global offset for all children, while scroll-margin goes on the individual child elements to define their specific offset. Also, remember that this property does not visually add 'padding' to the content like the standard box model padding; it only changes the behavior of the scroll position.

Accessibility

Setting large scroll-padding values can sometimes cause confusion if users cannot see why the content is stopping short of the edge. Ensure that interactive elements are not cut off or made inaccessible by excessive offsets, especially on small mobile screens where vertical space is at a premium.

Dev Data Table: scroll-padding-bottom property

default	auto
animatable	no
inherited	no
experimental	no
year_intro	2018
year_standard	2019
js_syntax_1	element.style.scrollPaddingBottom = "20px";
js_syntax_2	element.style.setProperty("scroll-padding-bottom", "20px");
js_note	When manipulating this via JavaScript, ensure the value is a string containing the unit, and remember it affects the container's scrollport, not the individual items.
browsers	{ "Chrome": 69, "Edge": 79, "Firefox": 68, "Safari": 11.1, "Opera": 56, "Chrome Android": 69, "Safari on iOS": 11, "Samsung Internet": 10.1, "Opera Mobile": 48 }