CSS scroll-margin-inline-end Property

Description

The scroll-margin-inline-end CSS property is used to define the minimum space, or margin, between the end edge of a scrolling container (like an overflowed element) and its scrolling content. This property is particularly useful in web design to ensure that content doesn't get too close to the container's edge, making it more visually appealing and easier to read. By setting this property, you can control the distance between the content and the container's end, providing a buffer zone for a smoother scrolling experience.

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

Interactive Demo

1
2
3
Scroll ยป

Syntax

scroll-margin-inline-end: >length<

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: end;
}

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

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

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

Browser Support

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

Desktop
Edge Chrome Firefox Opera Safari
7969685615
Tablets / Mobile
Chrome Firefox Opera Safari Samsung Webview
696848151069

Last updated by CSSPortal on: 3rd January 2024