scroll-margin-block-end

Overview

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

Examples and Usage

To demonstrate the scroll-margin-block-end property, we'll use a simple structure with four scrollable items inside a scroll container. By implementing the scroll-snapping functionality, we can examine how scroll-margin-block-end influences it.

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: end none; /* Align scroll snap to end edge */
  scroll-margin-block-end: 20px; /* Add 20px outset margin at block-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 */
}

Let's deconstruct the CSS styling provided above:

• The .scroll-container class creates a scroll container with a defined dimension of 300px by 300px. Vertical scrolling is enabled (overflow-y: scroll), while horizontal scrolling is disallowed (overflow-x: hidden). Vertical scroll snapping is implemented using scroll-snap-type: y mandatory.

• The .scroll-item class is designated for items inside the scroll container. For illustrative purposes, their dimensions are set to match those of the scroll container.

• With scroll-snap-align: end none, the alignment of each item within the scroll container during scroll snapping is specified. The end value directs the browser to align the block-end (bottom edge in horizontal writing mode) of each item with the block-end of the scroll container, under the assumption of the default (horizontal) writing mode.

• The scroll-margin-block-end: 20px rule establishes a 20px scroll margin at the block-end (bottom edge in horizontal writing mode) of each item. This influences the scroll-snapping behavior by effectively inserting a 20px scroll margin between the block-end of a snapped item and the block-end of the scroll container.

• The .scroll-item span rules are mainly for aesthetic enhancement, using a flex layout to center the text within each scroll item both vertically and horizontally.

• The .item-1, .item-3, .item-2, and .item-4 classes provide differentiation between items by assigning different background colors to each.

Keep in mind that the writing-mode property can impact the scroll-margin-block-end behavior. In a default writing-mode: horizontal-tb, such as in this case, the block-end edge corresponds to the bottom edge of the container.

Values

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

Associated Properties

• scroll-margin-block
• scroll-margin-block-start
• 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-end is responsible for managing the scroll-snapping behavior at the block-end edge of an element within a scroll container. Unlike regular margins, it doesn't interfere with the layout by pushing away other elements.

• As part of the scroll-margin properties, scroll-margin-block-end handles the scroll snap area of individual child elements inside the scroll container. In contrast, scroll-padding properties adjust the scroll snap area of the scroll container itself.

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

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

• As a flow-relative property, scroll-margin-block-end is influenced by the writing-mode property. It changes its behavior 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-end

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