CSS scroll-margin-bottom Property

This property defines the margin at the bottom of an element's scroll snap area, creating an offset between the element and the scroll container's edge.

selector { scroll-margin-bottom: value; }
<length> Specifies a fixed distance from the bottom edge of the element using units like px, em, or rem.

Code Examples

A basic vertical scroll container where each section snaps to the bottom with a 50px margin offset.

<style>
.container {
  width: 300px;
  height: 300px;
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
  border: 2px solid #333333;
}
.item {
  width: 100%;
  height: 300px;
  scroll-snap-align: end;
  scroll-margin-bottom: 50px;
}
.color1 { background-color: #ffcc00; }
.color2 { background-color: #00ccff; }
</style>
<div class="container">
  <div class="item color1">Section 1</div>
  <div class="item color2">Section 2</div>
</div>

An advanced implementation using JavaScript to dynamically apply a 100px scroll-margin-bottom to multiple sections in a scroll-snap layout.

<style>
#app {
  display: flex;
  flex-direction: column;
  height: 400px;
  overflow-y: auto;
  scroll-snap-type: y proximity;
}
.section {
  min-height: 400px;
  scroll-snap-align: end;
  border-bottom: 1px solid #000000;
}
</style>
<div id="app">
  <div id="s1" class="section">Alpha</div>
  <div id="s2" class="section">Beta</div>
  <div id="s3" class="section">Gamma</div>
</div>
<script>
const sections = document.querySelectorAll(".section");
sections.forEach(s => {
  s.style.scrollMarginBottom = "100px";
});
</script>

Pro Tip

You can use this property to create a visual safety zone for dynamic layouts. If you have an app with a bottom navigation bar, setting a scroll-margin-bottom on your sections ensures that when a user jumps to a section via a link, the bottom of that section isn't hidden behind your navigation bar.

Deep Dive

Think of scroll-margin-bottom as a landing buffer. When you have a scroll container and you want to snap to an element, this property tells the browser, "Hey, don't just stop at the bottom edge; leave this much extra space." It is part of the Scroll Snap module. Unlike standard bottom margin which pushes other elements away in the layout, scroll-margin-bottom only affects the calculation of the snap position within the scrollport. It is particularly useful when you have a bottom-aligned sticky footer and you don't want your content to be tucked behind it when the browser jumps to a specific section.

Best Practices

Use this property on child elements within a scroll-snap container to ensure they are framed correctly when the user scrolls. It is most effective when paired with scroll-snap-align: end or scroll-snap-align: center. Always use relative units like rem or em if your layout needs to remain flexible for users who adjust their browser font sizes.

Common Pitfalls

A common mistake is applying this to the scroll container itself. This property belongs on the child element that is being scrolled into view. Also, it does not create actual physical space between elements in the document flow; it only exists for the scroll snapping logic.

Accessibility

Setting proper scroll margins is vital for accessibility because it ensures that focused elements or target sections are not partially obscured by fixed or sticky UI elements, allowing users with visual impairments or those using screen readers to see the context of the content clearly.

Dev Data Table: scroll-margin-bottom property

default 0
animatable no
inherited no
experimental no
year_intro 2016
year_standard 2019
js_syntax_1 element.style.scrollMarginBottom = "20px";
js_syntax_2 element.style.setProperty("scroll-margin-bottom", "20px");
js_note When manipulating this property in JavaScript, use camelCase for the style object property or the exact kebab-case string when using setProperty.
browsers { "Chrome": 69, "Edge": 79, "Firefox": 68, "Safari": 11, "Opera": 56, "Chrome Android": 69, "Safari on iOS": 11, "Samsung Internet": 10, "Opera Mobile": 48 }
results render here...