CSS scroll-margin Property

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

1
2
3
Scroll ยป

Syntax

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

Values

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

Example

<div class="scroller">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
.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;
}

Browser Support

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

Desktop
Edge Chrome Firefox Opera Safari
7969905614.1
Tablets / Mobile
Chrome Firefox Opera Safari Samsung Webview
69904814.51069

Last updated by CSSPortal on: 3rd January 2024