scroll-padding-bottom

Overview

The scroll-padding-bottom property is used to establish the offsets (in terms of scroll padding) for the bottom 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

Let's examine the scroll-padding-bottom property within a scroll snap container setting. We'll set up a scroll container with several nested items and observe how this property impacts the bottom scroll padding and how it interacts with scroll snapping.

HTML Structure

<div class="scroll-container">
  <div class="scroll-item item-1"></div>
  <div class="scroll-item item-2"></div>
  <div class="scroll-item item-3"></div>
  <div class="scroll-item item-4"></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 vertical scrolling */
  overflow-y: scroll;
  
  /* Disabling horizontal scrolling */
  overflow-x: hidden;
  
  /* Implementing vertical scrolling with mandatory snap points */
  scroll-snap-type: y mandatory;

  /* Setting a 40px scroll padding at the bottom edge */
  scroll-padding-bottom: 40px; 
}

/* 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;
}

/* 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 setup, the scroll-padding-bottom: 40px applied to the .scroll-container class ensures a 40-pixel padding at the bottom of the scroll container when a scroll item is scrolled into view. The overflow-y: scroll and overflow-x: hidden properties enable vertical scrolling and disable horizontal scrolling, respectively.

We've also enforced scroll-snapping behavior along the y-axis with scroll-snap-type: y mandatory. This means that the scrolling action will halt at specific points, known as snap points. The scroll-snap-align: end applied to the .scroll-item class aligns these snap points to the end edge of the scroll container.

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

Values

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

Associated Properties

• scroll-padding
• scroll-padding-top
• scroll-padding-right
• scroll-padding-left

Tips and Tricks

• The scroll-padding-bottom property could prove useful in designing mobile-friendly sites. Mobile browsers often have a navigation bar at the bottom, which can obstruct the last bit of content in a scroll container. Using scroll-padding-bottom can ensure that this content remains visible.

• The value of scroll-padding-bottom can be a length or a percentage. Percentages refer to the size of the scrollport. This means that a value of scroll-padding-bottom: 10% would create a bottom scroll padding that is 10% of the height of the scrollport.

• When defining scroll-padding-bottom in the full scroll-padding shorthand, it should be the third value in the sequence. For instance, in scroll-padding: 10px 10px 20px 10px;, the 20px stands for the scroll-padding-bottom value.

• scroll-padding-bottom is an essential property in scroll snapping. It controls the visible region of the snap container, ensuring snapped elements are clearly visible, which improves user experience and content accessibility.

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

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