scroll-margin-inline-start

Overview

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

Examples and Usage

To demonstrate the scroll-margin-inline-start, we'll consider a scroll container consisting of four child elements. These elements are given a scroll margin at their inline-start 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 start; /* Align scroll snap to start edge */
  scroll-margin-inline-start: 20px; /* Add 20px outset margin at inline-start 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 start rule specifies how each item aligns within the scroll container when scroll snapping occurs. The start keyword tells the browser to align the start edge (typically the left edge in left-to-right languages) of each item with the start 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-start: 20px sets a 20px margin to the left 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 left edge of the scroll container and the start 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-start can be influenced by the writing-mode and direction properties. In the default horizontal-tb writing mode and left-to-right scripts, the inline-start edge corresponds to the left edge of the container.

Values

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

Associated Properties

• scroll-margin-inline
• scroll-margin-inline-end
• 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-start helps control the scroll-snapping behavior for the inline-start 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-start, 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-start paired with a suitable scroll-snap-align value is key. If scroll-snap-align is set to start, the browser will align the start edge of the snap area (including the scroll-margin-inline-start 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-start participates in the calculation of the scroll snap area, creating an outset for the inline-start 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-start 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-start

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