scroll-padding-block-end

Overview

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

Examples and Usage

Let's explore how scroll-padding-block-end operates through a demonstrative example. We'll use a scrolling container with scroll snapping enabled and illustrate the effect of the property on the scroll padding on the block-end edge and its alignment with the 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 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 30px scroll padding at the block-end edge */
  scroll-padding-block-end: 30px;
}

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

/* 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 CSS configuration, we assigned scroll-padding-block-end: 30px to our .scroll-container. This gives us a 30-pixel scroll padding from the block-end edge each time a scroll item snaps into view. Given the default writing mode of web pages (horizontal-tb), 'block-end' corresponds to the bottom edge of the container. Thus, in this case, scroll-padding-block-end assures a bottom scroll padding of 30 pixels.

Also, we restricted scrolling to the vertical axis using overflow-x: hidden and overflow-y: scroll. To enforce scroll snapping, we used scroll-snap-type: y mandatory, which causes the scroll to halt at specific snap points. scroll-snap-align: end none aligns these snap points with the end edge of each .scroll-item.

Furthermore, scroll-snap-align: end none instructs the browser to align the snap points with the end edge of each .scroll-item during block scrolling. As the scrolling here is solely vertical, it is equivalent to simply stating scroll-snap-align: end. This end none format is important when dealing with scroll containers that permit both vertical and horizontal scrolling as it provides detailed control over the scroll snapping behavior in each dimension.

In action, as a user scrolls down the container, each .scroll-item will stop and align itself with the bottom edge of the .scroll-container, maintaining a 30-pixel distance.

Values

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

Associated Properties

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

Tips and Tricks

• The scroll-padding-block-end property can be an efficient solution when you are dealing with fixed or absolutely positioned elements that might obscure the content when scrolled into view. It allows you to manage visibility by setting up an offset at the block-end edge of the scrolling region.

• The property, like its related flow-relative, scroll-padding properties, is influenced by the writing mode. For instance, in a horizontal-tb writing mode, 'block-end' pertains to the bottom edge. In contrast, in the vertical-lr and vertical-rl modes, 'block-end' would signify the right and left edge, respectively.

• When using scroll-padding-block-end, keep in mind that it affects the scrollable area of the element rather than the element's physical dimensions. This means that the padding won't affect the overall layout or positioning of the element but will influence where the browser targets for scroll snapping.

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

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