scroll-margin-bottom

Overview

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

Examples and Usage

In the following demonstration, we'll look at a scroll container consisting of four child elements. Each of these elements is assigned a distinct scroll margin at the bottom of their scroll snap areas.

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

.scroll-container {
  width: 300px; /* Sets the width of the scroll container */
  height: 300px; /* Sets the height of the scroll container */
  border: 2px solid black; /* Adds a border around the scroll container for visualization */
  overflow-y: scroll; /* Enables vertical scrolling */
  overflow-x: hidden; /* Disables horizontal scrolling */
  scroll-snap-type: y mandatory; /* Enforces vertical scrolling with mandatory snapping */
}

.scroll-item {
  width: 300px; /* Sets the width of each scroll item */
  height: 300px; /* Sets the height of each scroll item */
  scroll-snap-align: end; /* Aligns snapping to the end edge of the item */
  scroll-margin-bottom: 30px; /* Defines a scroll margin at the bottom of the scroll snap area */
}

.scroll-item span {
  display: flex; /* Utilizes flexbox for center alignment */
  justify-content: center; /* Horizontally centers content */
  align-items: center; /* Vertically centers content */
  height: 100%; /* Takes the full height of the parent */
  font-size: 3em; /* Sets the font size */
  color: black; /* Sets the font color */
  font-family: "UI Monospace", monospace; /* Defines the font family */
}

.item-1,
.item-3 {
  background-color: orange; /* Sets the background color for items 1 and 3 */
}

.item-2,
.item-4 {
  background-color: lightblue; /* Sets the background color for items 2 and 4 */
}

In this example, a scroll container has been designed with a specific width and height, encompassing four child elements or "scroll items". Each scroll item is given a scroll margin at its bottom edge, set by the scroll-margin-bottom property. This scroll margin dictates how each item aligns with the snapport of the scroll container during a scroll operation.

The scroll-snap-type property, set to y mandatory, enforces vertical scroll snapping within the container. This implies that any scroll action within the container will halt at a defined snap point, as influenced by the scroll-margin-bottom and scroll-snap-align properties on the scroll items.

For each of these scroll items, scroll-snap-align is set to end. This directs the browser to align the end edge of the snap area (inclusive of the scroll-margin-bottom space) with the snapport during a snapping operation.

It's worth noting the role of the overflow-y and overflow-x properties. In this case, vertical scrolling is enabled (overflow-y: scroll), while horizontal scrolling is disabled (overflow-x: hidden), making the scroll container optimized for vertical scroll snapping.

While scroll-padding properties adjust the scroll snap area for the entire scroll container, scroll-margin properties, like scroll-margin-bottom, specifically tweak the scroll snap area for each scroll item.

Finally, the <span> elements, distinctive colors, and font styles implemented in this example serve purely aesthetic purposes, offering visual differentiation between items, and bear no influence on the actual snapping behavior.

Values

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

Associated Properties

• scroll-margin
• scroll-margin-top
• scroll-margin-right
• scroll-margin-left
• 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-bottom property gives you the ability to influence scroll-snapping behavior for the bottom edge of an element within a scroll container. Note that it doesn't affect the layout in the sense of pushing other elements away as a regular margin would.

• scroll-margin properties, such as scroll-margin-bottom, affect the scroll snap area of the individual child elements within the scroll container, in contrast with scroll-padding properties, which adjust the scroll snap area of the scroll container itself. Essentially, scroll-margin controls the snapping alignment for the child elements, whereas scroll-padding determines the snapping area within the parent container.

• It's crucial to pair scroll-margin-bottom with an appropriate scroll-snap-align value. For instance, when scroll-snap-align is set to end in a vertical scrolling context, the browser will align the bottom edge of the snap area (including the scroll-margin-bottom space) with the bottom edge of the snapport during a snapping operation.

• Keep in mind that not all scroll containers are scroll snap containers. A scroll container transforms into a scroll snap container when scroll snapping is enforced through the scroll-snap-type property. A scroll snap container is, therefore, a scroll container with scroll snapping behavior enabled.

• scroll-margin-bottom contributes to the calculation of the scroll snap area, establishing the margin for the bottom edge of the snap area. This value is added to the size of the element, creating an "outset" from the element, which sets the region within which scroll snapping can happen.

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

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