scroll-padding-left

Overview

The scroll-padding-left property is used to establish the offsets (in terms of scroll padding) from the left 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 property offers the ability to tweak the positioning of content within the scrollport, with a notable impact on the behavior of scroll snap containers by setting the padding offsets that assist in aligning scroll positions at snap points.

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

Examples and Usage

In the section below, we'll go through an example where scroll-padding-left is applied within a scroll snap container. Specifically, we'll create a scroll container with several nested items and observe the impact of this property on the left-side scroll padding and how it interacts 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 left edge */
  scroll-padding-left: 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 snippet above, we've applied scroll-padding-left: 20px to the .scroll-container class, guaranteeing a 20-pixel padding on the left side of the scroll container when a scroll item snaps into view. The overflow-y: hidden and overflow-x: scroll properties limit the container's scrolling to the horizontal axis exclusively.

The scroll-snap-type: x mandatory property implements scroll-snapping behavior, which forces scrolling to halt at specific points called snap points. The scroll-snap-align: start property aligns these snap points with the left edge of each .scroll-item.

By applying white-space: nowrap; we ensure that the child elements are aligned horizontally, creating a single-line scrollable area. The child elements' sizes match that of the scroll container, providing a clear demonstration of the scroll snapping and padding mechanisms.

Values

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

Associated Properties

• scroll-padding
• scroll-padding-top
• scroll-padding-right
• scroll-padding-bottom

Tips and Tricks

• Scroll padding is best utilized when used with scroll snap points (scroll-snap-type and scroll-snap-align). It can provide a buffer zone around the snapping region, creating a better scrolling experience and preventing content from being obscured by overlapping elements.

• The scroll-padding-left property can be affected by other CSS properties such as direction and writing-mode.

• While any valid CSS length unit can be used with the scroll-padding properties, it's typically most useful to use pixel (px) values for precision or percentage (%) values for responsive design.

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

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