CSS scroll-margin-block-end Property

Code Examples

A basic scroll snap container where each section leaves a 50px gap at the bottom when snapped.

<style>
.container {
  width: 300px;
  height: 300px;
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
  border: 2px solid #333333;
}
.section {
  height: 300px;
  scroll-snap-align: end;
  scroll-margin-block-end: 50px;
  background-color: #f0f0f0;
  border-bottom: 1px solid #cccccc;
}
</style>
<div class="container">
  <div class="section">Section 1</div>
  <div class="section">Section 2</div>
  <div class="section">Section 3</div>
</div>

An advanced example using JavaScript to dynamically set the scroll margin before programmatically scrolling an element into view.

<style>
.scroll-box {
  display: flex;
  flex-direction: column;
  height: 400px;
  overflow-y: auto;
  scroll-snap-type: y proximity;
  padding: 10px;
}
.item {
  min-height: 200px;
  margin-bottom: 20px;
  background: #0066cc;
  color: #ffffff;
  scroll-snap-align: end;
}
</style>
<div id="app-box" class="scroll-box">
  <div class="item" id="target-item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
</div>
<button onclick="applyMargin()">Set Dynamic Margin</button>
<script>
function applyMargin() {
  const el = document.getElementById("target-item");
  el.style.scrollMarginBlockEnd = "100px";
  el.scrollIntoView({ behavior: "smooth", block: "end" });
}
</script>

Pro Tip

If you are using modern CSS layouts, stick to logical properties like this one instead of physical ones like scroll-margin-bottom. It makes your site much easier to translate into languages that read in different directions without having to rewrite your entire stylesheet.