scroll-margin-block-start

Overview

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

Examples and Usage

Let's illustrate scroll-margin-block-start in the context of a scrolling container with vertically aligned items. We'll assign a scroll margin to the block-start edge of each element to influence the 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

/* A scroll container with a fixed size and vertical scroll snap behavior */
.scroll-container {
  width: 300px; /* Set the width */
  height: 300px; /* Set the height */
  border: 2px solid black; /* Add border for visibility */
  overflow-y: scroll; /* Enable vertical scrolling */
  overflow-x: hidden; /* Disable horizontal scrolling */
  scroll-snap-type: y mandatory; /* Enable vertical scroll snapping */
}

/* Define the properties for each scroll item */
.scroll-item {
  width: 300px; /* Same width as the container */
  height: 300px; /* Same height as the container */
  scroll-snap-align: start none; /* Align scroll snap to start edge */
  scroll-margin-block-start: 20px; /* Add 20px outset margin at block-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 above CSS configuration works:

• The .scroll-container class defines a container of specific dimensions (300px by 300px). This container allows vertical scrolling due to overflow-y: scroll, but not horizontal scrolling (overflow-x: hidden). It also enforces vertical scroll snapping with scroll-snap-type: y mandatory.

• The .scroll-item class applies to the items within the scroll container. Their dimensions are set to match those of the scroll container for demonstration purposes.

• The scroll-snap-align: start none rule specifies how each item aligns within the scroll container when scroll snapping occurs. The start keyword instructs the browser to align the top edge of each item with the top edge of the scroll container, as we're working in the default writing mode.

• Notably, scroll-margin-block-start: 20px sets a 20px margin at the top edge of each item, impacting the scroll snapping. It effectively adds a 20px buffer zone between the top edge of the scroll container and the top edge of a snapped item.

• The .scroll-item span styling is primarily for visual appeal. 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.

Bear in mind that the behavior of scroll-margin-block-start can be influenced by the writing-mode property. In the default writing-mode: horizontal-tb, the block-start edge corresponds to the top edge of the container.

Values

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

Associated Properties

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

Tips and Tricks

• scroll-margin-block-start controls the scroll-snapping behavior for the block-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-block-start, as part of the scroll-margin properties, manages the scroll snap area of individual child elements in the scroll container. Conversely, scroll-padding properties adjust the scroll snap area of the scroll container itself.

• Pairing scroll-margin-block-start with a suitable scroll-snap-align value is crucial. If scroll-snap-align is set to start, the browser aligns the start edge of the snap area (inclusive of the scroll-margin-block-start area) with the snapport during a scroll snap operation.

• A scroll container becomes a scroll snap container when scroll-snapping behavior is enabled through the scroll-snap-type property.

• Being a flow-relative property, scroll-margin-block-start is influenced by the writing-mode property. Its behavior changes depending on this setting, making it adaptable to various text orientations.

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-block-start

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