CSS scroll-margin-right Property

Description

The scroll-margin-right CSS property is used to define the minimum space or margin that should be reserved on the right side of an element when it is scrolled into view within a scrollable container. This property helps prevent content from being obscured by the scrollbars of the container, ensuring that the element remains visible and properly aligned within the container's viewport. It's particularly useful for improving the readability and user experience of web pages with scrollable content, such as articles or navigation menus, by ensuring that important content doesn't get hidden behind the scrollbars.

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

Interactive Demo

scroll-margin-right: 0;

scroll-margin-right: 20px;

scroll-margin-right: 2em;

Scroll »

Syntax

scroll-margin-right: <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: 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-right: 20px;
}

Result

Editor