scroll-margin-left

Overview

The scroll-margin-left property is used to establish a left 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-left is part of the scroll-margin shorthand, which also includes scroll-margin-top, scroll-margin-right, and scroll-margin-bottom.

Examples and Usage

We'll now illustrate how the scroll-margin-left property affects scroll snapping. Consider a scroll container composed of four child elements, each assigned a specific scroll margin at their left edge.

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

/* Styling for the scroll container */
.scroll-container {
  width: 300px; /* Setting the scroll container's width to 300px */
  height: 300px; /* Setting the scroll container's height to 300px */
  border: 2px solid black; /* Adding a border for visual differentiation */
  overflow-x: scroll; /* Enabling horizontal scrolling */
  overflow-y: hidden; /* Disabling vertical scrolling */
  scroll-snap-type: x mandatory; /* Enforcing horizontal scroll snapping */
  white-space: nowrap; /* Preventing the child elements from wrapping onto next lines */
}

/* Styling for each scroll item */
.scroll-item {
  width: 300px; /* Matching the width of the scroll container */
  height: 300px; /* Matching the height of the scroll container */
  display: inline-block; /* Placing the items side-by-side in a line */
  scroll-snap-align: start; /* Snapping the start edge of the element (left side for LTR languages) */
  scroll-margin-left: 20px; /* Setting a 20px scroll margin at the left */
}

.scroll-item span {
  display: flex; /* Using flexbox for centering the numbers */
  justify-content: center; /* Horizontally centering the numbers */
  align-items: center; /* Vertically centering the numbers */
  height: 100%; /* Ensuring the span takes the full height of its parent */
  font-size: 3em; /* Setting a large font size for visibility */
  color: black; /* Setting the text color to black */
  font-family: "UI Monospace", monospace; /* Using a monospace font for uniform character width */
}

.item-1,
.item-3 {
  background-color: orange; /* Assigning a background color for differentiation */
}

.item-2,
.item-4 {
  background-color: lightblue; /* Assigning a different background color for differentiation */
}

In the provided CSS setup:

• The .scroll-container class sets up a scroll container with specific dimensions of 300px by 300px, enforcing horizontal scrolling and scroll snapping. Horizontal scrolling (overflow-x: scroll) and scroll snapping (scroll-snap-type: x mandatory) are enabled while vertical scrolling is disabled (overflow-y: hidden).

• To keep the .scroll-item elements in a horizontal line, the white-space property is set to nowrap, preventing line breaks among these inline-block elements.

• The .scroll-item elements adopt the display: inline-block property. This setting allows the elements to reside on the same line, while also retaining their block properties such as width, height, margin, and padding.

• The scroll snap alignment for each .scroll-item is set to start via the scroll-snap-align property. This instructs the browser to align the left edge of each item with the left edge of the scroll container during scroll snapping.

• The scroll-margin-left: 20px for the .scroll-item creates a 20px outset to the left of the items. This margin becomes part of the scroll snap area, influencing the item's alignment during snapping operations. Thus, when snapping occurs, a 20px gap is maintained between the item's left edge and the scroll container's left edge.

• Styling of .scroll-item span and different background colors for item-1, item-3, and item-2, item-4 classes are for visualization purposes, providing clear differentiation among items.

To summarize, the combination of these CSS rules results in four items within the scroll container engaging in scroll snapping. With a defined 20px outset margin on their left (via scroll-margin-left), each item aligns to the left edge of the snapport such that a 20px gap is preserved when snapping takes place.

Values

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

Associated Properties

• scroll-margin
• scroll-margin-top
• scroll-margin-right
• scroll-margin-bottom
• 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-left property helps manipulate the scroll-snapping behavior for the left edge of an element in a scroll container. Unlike a regular margin, it doesn't affect the layout by pushing other elements away.

• scroll-margin properties, including scroll-margin-left, control the scroll snap area of individual child elements within the scroll container. Conversely, scroll-padding properties adjust the scroll snap area of the scroll container itself.

• Pairing scroll-margin-left with an appropriate scroll-snap-align value is crucial. If scroll-snap-align is set to start in a horizontal scrolling context, the browser will align the left edge of the snap area (inclusive of the scroll-margin-left space) with the left edge of the snapport during a scroll snap operation.

• A scroll container becomes a scroll snap container when it enables scroll snapping behavior through the scroll-snap-type property. However, not all scroll containers are scroll snap containers.

• scroll-margin-left contributes to the calculation of the scroll snap area, forming a margin for the left edge of the snap area. This value expands the size of the element's snap area, creating an "outset" that determines the scroll-snapping region.

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-left

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