scroll-padding-inline-end

Overview

The scroll-padding-inline-end property is used to establish the scroll padding offsets for the end 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-end, along with scroll-padding-inline-start, is part of the shorthand scroll-padding-inline property.

Examples and Usage

In the example below, we use scroll-padding-inline-end within a scroll snap container setting. We construct a scroll container with several items nested within, illustrating the property's influence on the scroll padding for the inline-end 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-end edge */
  scroll-padding-inline-end: 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 end edge on scroll snap. 
     Here, 'none' is used for the block dimension 
     and 'end' for the inline dimension */
  scroll-snap-align: none end;

  /* 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 this configuration, scroll-padding-inline-end: 20px is applied to the .scroll-container. This establishes a padding of 20 pixels from the inline-end edge each time a scroll item comes into the viewport.

The scrolling mechanism here is solely horizontal, as defined by overflow-y: hidden and overflow-x: scroll. We further implement scroll snapping with scroll-snap-type: x mandatory, thereby enabling the scroll to halt at distinct snap points.

The property scroll-snap-align: none end guides the browser to align the snap points with the end edge of each .scroll-item. Since the scrolling in this scenario is exclusively horizontal, it's equivalent to simply declaring scroll-snap-align: end. The 'none end' format gains its significance when handling scroll containers that support both vertical and horizontal scrolling, as it offers precise control over scroll snapping behavior for each dimension.

All .scroll-item elements mirror the .scroll-container in terms of width and height, and are horizontally arranged via display: inline-block. The alternating background colors for odd and even items heighten the visual distinction.

Although not explicitly set in this example, writing-mode takes the default value horizontal-tb. In this case, lines of text progress from top to bottom, and the flow of text extends from left to right. Consequently, in this setup, the 'inline-end' direction is synonymous with the right edge of the scrollport.

Values

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

Associated Properties

• scroll-padding-inline
• scroll-padding-inline-start
• scroll-padding-block
• scroll-padding
• scroll-margin
• scroll-margin-inline
• scroll-margin-block

Tips and Tricks

• The scroll-padding-inline-end property could ensure that interactive elements within your scroll container, like navigation icons or overlaid controls, do not obscure underlying content.

• scroll-padding-inline-end, like other flow-relative, scroll-padding properties, adapts according to the writing-mode. In a horizontal top-to-bottom writing mode (writing-mode: horizontal-tb), 'inline-end' refers to the right edge of the scrollport. In vertical right-to-left (writing-mode: vertical-rl) and vertical left-to-right (writing-mode: vertical-lr) writing modes, 'inline-end' refers to the bottom and top edge of the scrollport, respectively.

• Keep in mind that negative values are invalid for scroll-padding properties.

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

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