CSS scroll-margin 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 CSS property is used to define the minimum margin between a scrolling container's content and the edges of its scrollable area. It allows web developers to control the space around the content where the browser should avoid snapping or scrolling, providing a smoother and more visually pleasing scrolling experience. This property is particularly useful for preventing content from getting too close to the edge of a scrollable container, ensuring that it remains easily readable and accessible during scrolling interactions on web pages.

Initial value: See individual properties
Applies to: all elements
Inherited: no
Computed value: See individual properties
Animatable: by computed value type
JavaScript syntax: object.style.scrollMargin

Interactive Demo

scroll-margin: 0;

scroll-margin: 20px;

scroll-margin: 2em;

Scroll »

Syntax

scroll-margin: <length>{1,4}

Values

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

Example

HTML

<div class="scroller">

  <div>1</div>

  <div>2</div>

  <div>3</div>

  <div>4</div>

</div>

CSS

.scroller {
  text-align: left;
  width: 250px;
  height: 250px;
  overflow-x: scroll;
  display: flex;
  box-sizing: border-box;
  border: 1px solid #000;
  scroll-snap-type: x mandatory;
}

.scroller > div {
  flex: 0 0 250px;
  width: 250px;
  background-color: #663399;
  color: #fff;
  font-size: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  scroll-snap-align: start;
}

.scroller > div:nth-child(2n) {
  background-color: #fff;
  color: #663399;
}

.scroller > div:nth-child(2) {
  scroll-margin: 1rem;
}

.scroller > div:nth-child(3) {
  scroll-margin: 2rem;
}

Result

Editor