scroll-padding-inline-start

Overview

The scroll-padding-inline-start property is used to establish the scroll padding offsets for the start edge in the inline direction of the scrollport, which is the currently visible portion of the scroll container that the user sees, allowing adjustments to the placement of content within the scrollport. Notably, the scroll-padding properties have an impact on the behavior of scroll snap containers when offsets are set to assist in aligning scroll positions at snap points.

Note: scroll-padding-inline-start, along with scroll-padding-inline-end, is part of the shorthand scroll-padding-inline property.

Examples and Usage

In this demonstration, we use scroll-padding-inline-start within a scroll snap container setup. We'll construct a scroll container with various items nested within, observing the property's influence on the scroll padding for the inline-start edge and its interaction with scroll snap points.

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;
  height: 300px;
  border: 2px solid black;

  /* Enabling horizontal scrolling */
  overflow-x: scroll;

  /* Disabling vertical scrolling */
  overflow-y: hidden;

  /* Implementing horizontal scrolling with mandatory snap points */
  scroll-snap-type: x mandatory;

  /* Setting a 20px scroll padding at the inline-start edge */
  scroll-padding-inline-start: 20px;

  /* Ensuring contained items are in one line */
  white-space: nowrap;
}

/* Styling and alignment of the scroll items */
.scroll-item {
  width: 300px;
  height: 300px;

  /* Aligns elements to the start edge on scroll snap */
  scroll-snap-align: start;

  /* Arranging the items horizontally */
  display: inline-block;
}

/* Stylize the numbers within each item */
.scroll-item span {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  font-size: 3em;
  color: black;
  font-family: "UI Monospace", monospace;
}

/* Applying differing background colors for odd and even items */
.item-1,
.item-3 {
  background-color: orange;
}

.item-2,
.item-4 {
  background-color: lightblue;
}

In the CSS snippet, we set scroll-padding-inline-start: 20px on the .scroll-container. This ensures a padding of 20 pixels from the inline-start edge whenever a scroll item snaps into view. We allow scrolling only in the horizontal axis with overflow-y: hidden and overflow-x: scroll.

scroll-snap-type: x mandatory enforces scroll snapping, causing the scrolling to stop at particular snap points. Meanwhile, scroll-snap-align: start aligns these snap points with the start edge of each .scroll-item.

With white-space: nowrap, the child elements align horizontally, making a single-line scrollable region.

A key aspect to understand here is the effect of the writing-mode property. By default, web pages follow a horizontal-tb writing mode, meaning text lines are arranged from top to bottom, and within each line, text flows from left to right. Therefore, in this default context, scroll-padding-inline-start applies to the left edge of the scrollport.

Values

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

Associated Properties

• scroll-padding-inline
• scroll-padding-inline-end
• scroll-padding-block
• scroll-padding
• scroll-margin
• scroll-margin-inline
• scroll-margin-block

Tips and Tricks

• In cases where fixed or absolutely positioned elements could potentially obscure the content when scrolled into view, using scroll-padding-inline-start can be an effective way to maintain visibility.

• Bear in mind that scroll-padding-inline-start doesn't impact the physical padding of the scroll container or its content.

• scroll-padding-inline-start, as with other flow-relative, scroll-padding properties, is influenced by the writing-mode. In horizontal-tb writing mode, 'start' refers to the left edge of the scrollport. On the other hand, in the vertical-lr and vertical-rl modes, 'start' refers to the top and bottom edge of the scrollport, respectively. This highlights the adaptability of these properties in various text and layout 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-padding-inline-start

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