scroll-padding-top

Overview

The scroll-padding-top property is used to establish the offsets (in terms of scroll padding) for the top of the optimal viewing region 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 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-bottom, and scroll-padding-left.

Examples and Usage

In this demonstration, we'll explore the effect of scroll-padding-top within a scroll snap container. By setting up a scroll container with nested items, we'll illustrate the interplay between this property and the container's children, focusing on the top scroll padding.

HTML Structure

<div class="scroll-container">
  <div class="scroll-item"></div>
  <div class="scroll-item"></div>
  <div class="scroll-item"></div>
</div>

CSS Styling

.scroll-container {
  width: 300px;
  height: 300px;
  border: 2px solid black;
  overflow-y: scroll; /* Enables vertical scrolling */
  overflow-x: hidden; /* Disables horizontal scrolling */
  scroll-snap-type: y mandatory; /* Implements vertical scrolling with mandatory snap points */
  scroll-padding-top: 40px; /* Sets a 40px scroll padding at the top edge */
}

.scroll-item {
  width: 300px;
  height: 300px;
  scroll-snap-align: start; /* Aligns elements to the start edge on scroll snap */
  background-color: orange; /* Default background color */
}

.scroll-item:nth-child(2) {
  background-color: lightblue; /* Changes the color of the second item */
}

In this setup, we have applied scroll-padding-top: 40px to the .container class. This specifies a 40-pixel padding at the top of the scroll container when an item is scrolled into view. To enable scrolling along the y-axis (vertical scrolling), we have used overflow-y: scroll. To prevent horizontal scrolling, we have set overflow-x: hidden.

By assigning scroll-snap-type: y mandatory to the container, we enforce a scroll-snapping behavior along the y-axis, causing the scrolling action to halt at specific points (snap points). These snap points align to the start edge of the scroll container, thanks to the scroll-snap-align: start applied to the .scroll-item class.

Consequently, during scrolling, when a .scroll-item element comes into view, it adheres to the specified padding at the top, positioning itself neatly in the visible part of the container.

Values

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

Associated Properties

• scroll-padding
• scroll-padding-right
• scroll-padding-bottom
• scroll-padding-left

Tips and Tricks

• The scroll-padding-top property is useful when you have fixed or sticky elements at the top of your page that could obscure content when scrolled.

• A potential use case for scroll-padding-top might be an image gallery. By setting a suitable scroll-padding-top value, you can ensure that the top part of each image always has a certain amount of padding from the top edge of the scrollport, providing a more user-friendly view, especially if navigation controls or captions are displayed at the top.

• It's possible to use percentage values with scroll-padding-top. This can help create responsive designs where the scroll padding adjusts based on the size of the scroll container.

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

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