CSS scroll-margin-top Property

If this site has been useful, we’d love your support! Running this site takes time and resources, and every small contribution helps us keep creating valuable content. Consider buying us a coffee to keep things going strong!

☕ Buy a Coffee

Description

The scroll-margin-top CSS property is used to control the spacing between the top of an element and the top of its scroll container when it is scrolled into view. This property allows web developers to specify a buffer zone, preventing content from being visually obscured by the top edge of its scroll container. By setting scroll-margin-top, you can ensure that content is comfortably spaced within the viewport, improving the overall user experience by avoiding abrupt or visually jarring transitions when scrolling. This property is particularly useful when working with elements that have fixed or sticky positioning, ensuring they remain visually separated from the container's edge while scrolling.

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

Interactive Demo

scroll-margin-top: 0;

scroll-margin-top: 20px;

scroll-margin-top: 2em;

Scroll »

Syntax

scroll-margin-top: <length>

Values

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

Example

HTML

<div id="container">

  <div class="blue"></div>

  <div class="green"></div>

  <div class="blue"></div>

  <div class="green"></div>

  <div class="blue"></div>

  <div class="green"></div>

  <div class="blue"></div>

</div>

CSS

#container {
  position: relative;
  width: 80%;
  aspect-ratio: 3/1;
  margin: auto;
  border: solid black 2px;
  overflow-x: hidden;
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
}

.blue {
  background-color: lightblue;
  width: 95%;
  aspect-ratio: 3/1;
}

.green {
  background-color: lightgreen;
  width: 80%;
  aspect-ratio: 4/1;
}

.blue, .green {
  margin: 2px;
  scroll-snap-align: start;
  scroll-margin-top: 20px;
}

Result

Editor