scroll-margin-inline-end

Overview

The scroll-margin-inline-end property is used to establish a scroll margin (outset) for an element, at the end of the inline dimension. 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-inline-end is part of the flow-relative scroll-margin-inline shorthand property, which also includes scroll-margin-inline-start.

Examples and Usage

To demonstrate the scroll-margin-inline-end property, we'll consider a scroll container consisting of four child elements. These elements are given a scroll margin at their inline-end edge. In addition, this scroll margin can be adjusted for each element independently, allowing us to control their scroll snap behavior.

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; /* Set width */
  height: 300px; /* Set height */
  border: 2px solid black; /* Border for visibility */
  overflow-x: scroll; /* Enable horizontal scrolling */
  overflow-y: hidden; /* Disable vertical scrolling */
  scroll-snap-type: x mandatory; /* Enable horizontal scroll snapping */
  white-space: nowrap; /* Prevent line breaks among child elements */
}

/* Define the properties for each scroll item */
.scroll-item {
  width: 300px; /* Same width as container */
  height: 300px; /* Same height as container */
  display: inline-block; /* Place items side-by-side */
  scroll-snap-align: none end; /* Align scroll snap to end edge */
  scroll-margin-inline-end: 20px; /* Add 20px outset margin at inline-end edge */
}

/* Center the text within each scroll item */
.scroll-item span {
  display: flex; /* Use flex for centering */
  justify-content: center; /* Center horizontally */
  align-items: center; /* Center vertically */
  height: 100%; /* Full height of parent */
  font-size: 3em;
  color: black; 
  font-family: "UI Monospace", monospace;
}

.item-1,
.item-3 {
  background-color: orange; /* Color for odd-numbered items */
}

.item-2,
.item-4 {
  background-color: lightblue; /* Color for even-numbered items */
}

Here's how the CSS setup above works:

The .scroll-container class defines a container with specific dimensions (300px by 300px). This container allows horizontal scrolling due to overflow-x: scroll, but not vertical scrolling (overflow-y: hidden). It also enforces horizontal scroll snapping (scroll-snap-type: x mandatory). The white-space: nowrap rule ensures that the child elements of this container don't break onto new lines.

The .scroll-item class applies to the items within the scroll container. These items are made to display as inline blocks (display: inline-block), which lets them sit side by side in the same line while maintaining their block-like properties such as width, height, margin, and padding.

The scroll-snap-align: none end rule specifies how each item aligns within the scroll container when scroll snapping occurs. The end keyword tells the browser to align the end edge (typically the right edge in left-to-right languages) of each item with the end edge of the scroll container. The none keyword is included for completeness, but it has no effect here, as it refers to the block dimension, and we've disabled vertical scrolling in this example.

Crucially, scroll-margin-inline-end: 20px sets a 20px margin to the right of each item (when dealing with left-to-right languages), which comes into play during scroll snapping. It effectively adds a 20px buffer zone between the right edge of the scroll container and the end edge of a snapped item.

The .scroll-item span styling is primarily visual. It uses a flex layout to vertically and horizontally center the text within each scroll item.

The .item-1, .item-3, .item-2, and .item-4 classes differentiate between items by assigning them different background colors.

Note that scroll-margin-inline-end can be influenced by the writing-mode and direction properties. In the default horizontal-tb writing mode and left-to-right scripts, the inline-end edge corresponds to the right edge of the container.

Values

The scroll-margin-inline-end property accepts the following values:

Associated Properties

• scroll-margin-inline
• scroll-margin-inline-start
• scroll-margin-block
• scroll-margin
• scroll-padding
• scroll-padding-inline
• scroll-padding-block
• scroll-snap-type
• scroll-snap-align

Tips and Tricks

• scroll-margin-inline-end helps control the scroll-snapping behavior for the inline-end edge of an element within a scroll container. Unlike standard margins, it doesn't affect the layout by pushing other elements away.

• scroll-margin properties, including scroll-margin-inline-end, manage the scroll snap area of individual child elements in the scroll container. In contrast, scroll-padding properties adjust the scroll snap area of the scroll container itself.

• scroll-margin-inline-end paired with a suitable scroll-snap-align value is key. If scroll-snap-align is set to end, the browser will align the end edge of the snap area (including the scroll-margin-inline-end area) with the snapport during a scroll snap operation.

• A scroll container transforms into a scroll snap container when it enables scroll-snapping behavior through the scroll-snap-type property.

• scroll-margin-inline-end participates in the calculation of the scroll snap area, creating an outset for the inline-end edge of the snap area. This value enlarges the element's snap area, establishing an "outset" that determines the scroll-snapping region.

• As a flow-relative property, scroll-margin-inline-end is influenced by the writing-mode and direction properties. Its behavior changes depending on these settings, making it adaptable to various text orientations and writing directions.

Browser Compatibility

For a more detailed breakdown, 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-inline-end

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