CSS scroll-margin-left 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!

Description

The scroll-margin-left CSS property allows you to specify the amount of space or margin that should be maintained to the left of a scroll container when it is horizontally scrolled. This property is particularly useful when dealing with elements like images or text within a scrollable container, ensuring that content remains visually separated from the container's edges even when scrolled. It helps improve the readability and aesthetics of scrollable content by creating a buffer zone on the left side, preventing the content from getting too close to the container's edge during horizontal scrolling.

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

Interactive Demo

1
2
3
Scroll »

Syntax

scroll-margin-left: <length>

Values

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

Example

<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>
#container {
  position: relative;
  width: 80%;
  aspect-ratio: 2/1;
  margin: auto;
  border: solid black 2px;
  overflow-x: scroll;
  overflow-y: hidden;
  white-space: nowrap;
  scroll-snap-type: x mandatory;
}

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

.green {
  background-color: lightgreen;
  height: 80%;
  aspect-ratio: 3/2;
}

.blue, .green {
  margin: 2px;
  display: inline-block;
  scroll-snap-align: start;
  scroll-margin-left: 20px;
}

Browser Support

The following table will show you the current browser support for the CSS scroll-margin-left property.

Desktop
Edge Chrome Firefox Opera Safari
7969685614.1
Tablets / Mobile
Chrome Firefox Opera Safari Samsung Webview
69684814.51069

Last updated by CSSPortal on: 3rd January 2024