scroll-padding-right

Overview

The scroll-padding-right property is used to establish the offsets (in terms of scroll padding) from the right edge of the optimal viewing region of the scrollport, which represents the currently visible portion of the scroll container as observed by the user. This allows adjustments to the positioning of content within the scrollport. Notably, the scroll-padding properties have a considerable influence on the behavior of scroll snap containers by defining the padding offsets that guide the alignment of scroll positions at snap points.

Note: The scroll-padding shorthand property consists of scroll-padding-top, scroll-padding-right, scroll-padding-left, and scroll-padding-bottom.

Examples and Usage

To understand the scroll-padding-right property better, let's consider an example where it's applied within a scroll snap container. We'll set up a scroll container with several nested items and observe the influence of this property on the right-side scroll padding, and its engagement with scroll snapping.

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 right edge */
  scroll-padding-right: 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 */
  scroll-snap-align: 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 the example above, scroll-padding-right: 20px is applied to the .scroll-container class, ensuring a 20-pixel padding on the right side of the scroll container when a scroll item snaps into view. The properties overflow-y: hidden and overflow-x: scroll are used to limit the container's scrolling to the horizontal axis only.

Scroll-snapping behavior is implemented using scroll-snap-type: x mandatory, which forces the scroll action to pause at specific points, known as snap points. The scroll-snap-align: end property aligns these snap points to the right edge of each .scroll-item.

With white-space: nowrap; applied, the .scroll-container guarantees that its child elements (the .scroll-item divs) don't break into a new line, preserving the horizontal scrolling effect, which is important when the scroll container includes inline elements that could otherwise stack vertically, disrupting the desired scrolling behavior.

During horizontal scrolling, when a .scroll-item element snaps into view, it adheres to the right-side scroll padding defined by scroll-padding-right, and aligns according to the scroll snap configuration.

Values

The scroll-padding-right property accepts the following values:

Associated Properties

• scroll-padding
• scroll-padding-top
• scroll-padding-bottom
• scroll-padding-left

Tips and Tricks

• To create a balanced and controlled scrolling experience, apply a sensible value to scroll-padding-right based on the dimensions and design of your scroll container.

• scroll-padding-right can be used individually or in combination with other scroll-padding properties to manage the scroll padding on all or specific sides of the scroll container. Through the scroll-padding shorthand, these adjustments can be made with simplicity and precision.

• scroll-padding-right could be helpful when creating reading experiences with text that flows from right to left, ensuring the next line of text isn't cut off by the edge of the scrollport.

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

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