scroll-margin-right

Overview

The scroll-margin-right property is used to establish a right scroll margin (outset) for an element. This margin adjusts the element's scroll snap area, which is the region influencing its alignment when snapped. The snapping process occurs in relation to the snapport — the area within the scroll container's scrollport used as the alignment container for the scroll snap areas when calculating snap positions.

Note: scroll-margin-right is part of the scroll-margin shorthand, which also includes scroll-margin-bottom, scroll-margin-left, and scroll-margin-top.

Examples and Usage

For our demonstration, we'll observe a scroll container made up of four child elements. These elements are assigned a specific scroll margin at the right edge of their scroll snap areas.

HTML Structure

<div class="scroll-container">
  <div class="scroll-item item-1"><span>1</span></div>
  <div class="scroll-item item-2"><span>2</span></div>
  <div class="scroll-item item-3"><span>3</span></div>
  <div class="scroll-item item-4"><span>4</span></div>
</div>

CSS Styling

/* The scroll container with a fixed size and scroll snap behavior */
.scroll-container {
  width: 300px; /* Sets the width of the scroll container */
  height: 300px; /* Sets the height of the scroll container */
  border: 2px solid black; /* Adds a border around the scroll container for visualization */
  overflow-x: scroll; /* Enables horizontal scrolling */
  overflow-y: hidden; /* Disables vertical scrolling */
  scroll-snap-type: x mandatory; /* Enforces horizontal scrolling with mandatory snapping */
  white-space: nowrap; /* Prevents wrapping of inline items */
}

.scroll-item {
  width: 300px; /* Sets the width of each scroll item */
  height: 300px; /* Sets the height of each scroll item */
  display: inline-block; /* Makes the item inline-level but allows it to have block properties */
  scroll-snap-align: end; /* Aligns snapping to the end edge of the item */
  scroll-margin-right: 20px; /* Defines a scroll margin at the right of the scroll snap area */
}

.scroll-item span {
  display: flex; /* Utilizes flexbox for center alignment */
  justify-content: center; /* Horizontally centers content */
  align-items: center; /* Vertically centers content */
  height: 100%; /* Takes the full height of the parent */
  font-size: 3em; /* Sets the font size */
  color: black; /* Sets the font color */
  font-family: "UI Monospace", monospace; /* Defines the font family */
}

.item-1,
.item-3 {
  background-color: orange; /* Sets the background color for items 1 and 3 */
}

.item-2,
.item-4 {
  background-color: lightblue; /* Sets the background color for items 2 and 4 */
}

In the CSS setup, a scroll container has been constructed with a specific width and height, consisting of four child elements or "scroll items". Each scroll item is given a scroll margin at its right edge, determined by the scroll-margin-right property. This scroll margin influences how each item aligns with the snapport of the scroll container during a scrolling action.

• The scroll-snap-type property, set to x mandatory, enforces horizontal scroll snapping within the container. This means that any scroll action within the container will stop at a defined snap point, as influenced by the scroll-margin-right and scroll-snap-align properties on the scroll items.

• For each of the scroll items, scroll-snap-align is set to end. This instructs the browser to align the end edge of the snap area (including the scroll-margin-right space) with the snapport during a snapping operation.

• Notice the overflow-x and overflow-y properties. In this case, horizontal scrolling is enabled (overflow-x: scroll), while vertical scrolling is disabled (overflow-y: hidden), configuring the scroll container for horizontal scroll snapping.

• In addition, the white-space property is set to nowrap. This property is used to prevent the items from wrapping onto the next line, allowing for a smooth horizontal scrolling experience.

• display: inline-block is another addition in this context. This makes the items inline-level blocks that can have width and height set, which are crucial in establishing the scroll-snapping behavior in this horizontal scrolling context.

While scroll-padding properties adjust the scroll snap area for the entire scroll container, scroll-margin properties, like scroll-margin-right, specifically modify the scroll snap area for each scroll item.

The <span> elements, the varying colors, and font styles used in this example serve purely aesthetic purposes, providing visual differentiation between items, and do not impact the actual snapping behavior.

Values

The scroll-margin-right property accepts the following values:

Associated Properties

• scroll-margin
• scroll-margin-top
• scroll-margin-bottom
• scroll-margin-left
• scroll-margin-inline
• scroll-margin-block
• scroll-padding
• scroll-padding-inline
• scroll-padding-block
• scroll-snap-type
• scroll-snap-align

Tips and Tricks

• The scroll-margin-right property allows you to influence the scroll-snapping behavior for the right edge of an element within a scroll container. Keep in mind that it doesn't influence the layout by pushing other elements away as a regular margin would.

• scroll-margin properties, such as scroll-margin-right, affect the scroll snap area of the individual child elements within the scroll container, unlike scroll-padding properties, which adjust the scroll snap area of the scroll container itself. Essentially, scroll-margin controls the snapping alignment for the child elements, whereas scroll-padding determines the snapping area within the parent container.

• It's important to use scroll-margin-right with an appropriate scroll-snap-align value. For instance, when scroll-snap-align is set to end in a horizontal scrolling context, the browser will align the right edge of the snap area (inclusive of the scroll-margin-right space) with the right edge of the snapport during a snapping operation.

• Note that not all scroll containers are scroll snap containers. A scroll container becomes a scroll snap container when scroll snapping is enforced through the scroll-snap-type property. Thus, a scroll snap container is a scroll container with scroll snapping behavior enabled.

• scroll-margin-right contributes to the calculation of the scroll snap area, establishing the margin for the right edge of the snap area. This value is added to the size of the element, creating an "outset" from the element, which determines the region within which scroll snapping can occur.

Browser Compatibility

For a more detailed breakdown and specific context on older versions of Safari, refer to the first link in the Useful Resources below.

Caution: Internet Explorer support data may be incorrect since MDN browser-compat-data no longer updates it. Also, early Edge versions used EdgeHTML, leading to mismatched version numbers. From version 79, Edge uses Chromium with matching version numbers.

Useful Resources

Can I use: scroll-margin-right

W3C's Editor's Draft of CSS Scroll Snap Module Level 1: Physical Longhands for scroll-margin