CSS scroll-padding-block-end Property

Sets the scroll offset for the end edge of a scroll container in the block dimension. It ensures a buffer zone exists so content doesn't snap right against the edge.

selector { scroll-padding-block-end: value; }
auto The browser determines the scroll padding, which is typically 0px.
<length> Defines the padding using specific units like px, em, rem, or vh.
<percentage> Defines the padding as a percentage of the scroll container's block size.

Code Examples

A basic scroll-snap container where the bottom edge maintains a 50px buffer when snapping to the end of sections.

<style>
.scroll-box {
  width: 300px;
  height: 200px;
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
  scroll-padding-block-end: 50px;
  border: 2px solid #333333;
}
.section {
  height: 200px;
  scroll-snap-align: end;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
}
.one { background: #ff5722; }
.two { background: #4caf50; }
</style>
<div class="scroll-box">
  <div class="section one">Section 1</div>
  <div class="section two">Section 2</div>
</div>

Advanced implementation using JavaScript to calculate a fixed footer's height and apply it as scroll padding to prevent content overlap.

<style>
#app-container {
  width: 100%;
  height: 80vh;
  overflow-y: auto;
  scroll-snap-type: y proximity;
  scroll-padding-block-end: 0px;
  border: 5px solid #222222;
}
.item {
  height: 100%;
  scroll-snap-align: end;
  background-color: #eeeeee;
  border-bottom: 1px solid #cccccc;
}
.footer-ui {
  position: fixed;
  bottom: 0;
  height: 60px;
  width: 100%;
  background: #000000;
  color: #ffffff;
}
</style>
<div id="app-container">
  <div class="item">Panel A</div>
  <div class="item">Panel B</div>
  <div class="item">Panel C</div>
</div>
<div class="footer-ui" id="footer">Sticky Footer UI</div>
<script>
const container = document.getElementById("app-container");
const footer = document.getElementById("footer");
const buffer = footer.offsetHeight + "px";
container.style.scrollPaddingBlockEnd = buffer;
console.log("Scroll padding set to: " + buffer);
</script>

Pro Tip

If you have a dynamic sticky footer whose height might change based on user interaction, you can use a CSS variable for the scroll-padding-block-end value. Update that single variable via JavaScript when the footer height changes, and your scroll-snapping logic stays perfectly aligned without rewriting your entire stylesheet.

Deep Dive

Think of scroll-padding-block-end as a safety bumper at the end of a hallway. When you use scroll-snapping or link-based navigation, this property tells the browser, "Hey, don't stop exactly at the edge; leave this much space." Because it's a logical property, the block-end edge depends on the writing mode. In a standard English top-to-bottom layout, this affects the bottom of the container. If you change the writing mode to a vertical system, the edge shifts accordingly. It's specifically designed to handle how elements are positioned within the viewport after a scroll operation concludes.

Best Practices

Always use logical properties like this when building layouts intended for international audiences. It's much cleaner than hardcoding bottom padding if the text direction might change. Use this on the parent scroll container, not the child elements. It's particularly useful when you have a persistent UI element, like a bottom navigation bar, that might otherwise cover up the end of your content.

Common Pitfalls

The most common mistake is expecting this to act like regular CSS padding. It doesn't push the content inside the box during normal flow; it only adjusts the snapping area or where the browser lands after a jump. Also, ensure your container actually has scroll-snap-type defined or a scrollable overflow, otherwise this property sits there doing absolutely nothing.

Accessibility

This property is a win for accessibility. It prevents content from being obscured by fixed overlays or sticky footers. If a user navigates via keyboard to a specific section, scroll-padding-block-end ensures the entire element remains in the clear view of the user, rather than being partially cut off by the edge of the screen or a UI component.

Dev Data Table: scroll-padding-block-end property

default auto
animatable yes
inherited no
experimental no
year_intro 2017
year_standard 2019
js_syntax_1 element.style.scrollPaddingBlockEnd
js_syntax_2 element.style.setProperty("scroll-padding-block-end", "20px")
js_note In JavaScript, use camelCase for direct style access or the hyphenated string for the setProperty method.
browsers { "Chrome": "69", "Edge": "79", "Firefox": "68", "Safari": "11", "Opera": "56", "Chrome Android": "69", "Safari on iOS": "11", "Samsung Internet": "10.1", "Opera Mobile": "48" }
results render here...