CSS scroll-margin-block-end Property

Description

The scroll-margin-block-end property defines an extra offset on the element’s end side of the block axis that scrolling and scroll-snapping algorithms take into account. In other words, when the element is brought into view — whether by a user interaction that causes snapping or by a script calling a scroll method — the scrolling logic will position the element as if it had additional space on its block-end edge. Because it is a logical property, which edge is considered the “block end” depends on the element’s writing mode and direction (for example, bottom in typical horizontal writing modes, but different in vertical or right-to-left layouts).

This property does not change the element’s box sizing, paint, or DOM layout; it only influences scroll positioning calculations. That means it won’t affect document flow, hit testing, or how other elements are laid out, but it will change where the element lands when the browser aligns it to the scroll container’s edge. Developers typically use it to ensure scrolled-to content isn’t obscured by fixed or sticky UI (headers, toolbars) or to create consistent visual spacing when elements snap into view. It’s often used alongside snapping-related properties such as scroll-snap-align to fine-tune the final aligned position.

Conceptually, scroll-margin-block-end acts like a scroll-only “buffer” on the element’s block-end side. It applies relative to the relevant scroll container (usually the nearest ancestor that actually scrolls) and composes with other logical scroll margin properties and shorthands, for example scroll-margin or the opposing side scroll-margin-block-start, to produce the effective scroll offset. For container-level adjustments to where the scrolling viewport treats its edges, the related property scroll-padding is useful; combining these tools lets you reliably control both the container’s visible inset and how individual items are positioned when brought into view.

Definition

Initial value: 0
Applies to: all elements
Inherited: no
Computed value: as specified
Animatable: by computed value type
JavaScript syntax: object.style.scrollMarginBlockEnd

Interactive Demo

scroll-margin-block-end: 0;

scroll-margin-block-end: 20px;

scroll-margin-block-end: 2em;

1

2

3

Scroll »

Syntax

scroll-margin-block-end: <length>

Values

<length>An outset from the block end edge of the scroll container.

Example

HTML

<div class="container">

  <div class="controls">

    <button id="btn-margin">Scroll to box (with scroll-margin-block-end)</button>

    <button id="btn-no-margin">Scroll to box (without margin)</button>

  </div>



  <div class="scroller" id="scroller" tabindex="0">

    <div class="block">Top content  -  scroll down</div>



    <section id="target-with-margin" class="card with-margin" tabindex="-1">

      <h2>Target  -  with scroll-margin-block-end</h2>

      <p>This box has scroll-margin-block-end: 120px.</p>

    </section>



    <div class="block">Some more content</div>



    <section id="target-no-margin" class="card no-margin" tabindex="-1">

      <h2>Target  -  without margin</h2>

      <p>This box has no scroll-margin-block-end.</p>

    </section>



    <div class="block">Bottom content</div>

  </div>



  <div class="page-footer">Fixed footer  -  80px tall</div>

</div>



<script>

  const scroller = document.getElementById('scroller');

  document.getElementById('btn-margin').addEventListener('click', () => {

    document.getElementById('target-with-margin').scrollIntoView({behavior: 'smooth', block: 'end'});

  });

  document.getElementById('btn-no-margin').addEventListener('click', () => {

    document.getElementById('target-no-margin').scrollIntoView({behavior: 'smooth', block: 'end'});

  });

</script>

CSS

/* Layout */
:root {
  --footer-height: 80px;
}

body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  margin: 0;
  padding: 0;
  background: #f6f7f9;
  color: #111;
}

.container {
  padding: 16px;
  max-width: 900px;
  margin: 16px auto;
}

/* Controls */
.controls {
  display: flex;
  gap: 12px;
  margin-bottom: 12px;
}

.controls button {
  padding: 8px 12px;
  border: 1px solid #ccc;
  background: #fff;
  border-radius: 6px;
  cursor: pointer;
}

/* Scrolling area */
.scroller {
  height: 60vh;
  overflow: auto;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  background: #fff;
  padding: 16px;
  scroll-behavior: smooth;
  box-shadow: 0 2px 6px rgba(0,0,0,0.04);
}

.block {
  height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #666;
  background: linear-gradient(90deg,#fafafa,#f0f4f8);
  border-radius: 8px;
  margin-bottom: 16px;
}

.card {
  padding: 20px;
  background: #fff;
  border: 1px solid #dfe7ef;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(16,24,40,0.04);
  margin-bottom: 16px;
}

/* Demonstration of scroll-margin-block-end */
.with-margin {
  scroll-margin-block-end: 120px; /* leave 120px space from the block end when scrolled into view */
  outline: 2px solid #cfe8ff;
}

.page-footer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 80px;
  background: #0b5cff;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
}

Result

Editor

Browser Support

The following information will show you the current browser support for the CSS scroll-margin-block-end property. Hover over a browser icon to see the version that first introduced support for this CSS property.