scroll-padding-block-start

Overview

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

Examples and Usage

In this section, we'll provide an example showcasing the use of scroll-padding-block-start within a scroll snap container configuration. We'll set up a scroll container with several items nested within it, illustrating the property's influence on the scroll padding for the block-start edge and its interplay with 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-start edge */
  scroll-padding-block-start: 30px;
}

/* 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 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 setup above, we set scroll-padding-block-start: 30px on the .scroll-container. This ensures a padding of 30 pixels from the block-start edge whenever a scroll item snaps into view. Given the default writing mode of web pages (horizontal-tb), the 'block-start' edge refers to the top edge of the container. Therefore, in this context, scroll-padding-block-start ensures a top scroll padding of 30 pixels.

In addition, we allow scrolling only in the vertical axis with overflow-x: hidden and overflow-y: scroll. scroll-snap-type: y mandatory enforces scroll snapping, causing the scrolling to stop at particular snap points. Meanwhile, scroll-snap-align: start none aligns these snap points with the start edge of each .scroll-item.

Moreover, the rule scroll-snap-align: start none guides the browser to align the snap points with the start edge of each .scroll-item when it comes to block scrolling. Since the scrolling in this scenario is exclusively vertical, it's equivalent to simply declaring scroll-snap-align: start. The start none format gains its significance when handling scroll containers that support both vertical and horizontal scrolling, as it offers precise control over scroll snapping behavior for each dimension.

In practice, when a user scrolls down this container, each .scroll-item will stop and align itself to the top edge of the .scroll-container at a distance of 30 pixels.

Values

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

Associated Properties

• scroll-padding-block
• scroll-padding-block-end
• scroll-padding-inline
• scroll-padding
• scroll-margin
• scroll-margin-inline
• scroll-margin-block

Tips and Tricks

• The scroll-padding-block-start property can be useful when you have fixed or absolutely positioned elements that could potentially obscure the content when scrolled into view. It helps maintain visibility by creating an offset at the start of the block scroll.

• The scroll-padding-block-start property, like other flow-relative, scroll-padding properties, is influenced by the writing-mode. In a horizontal-tb writing mode, 'start' refers to the top edge of the scrollport. In the vertical-lr and vertical-rl modes, 'start' would refer to the left and right edge of the scrollport, respectively. This illustrates the flexibility of these properties in various text and layout orientations.

• When setting scroll-padding-block-start, it's generally a good idea to consider the size and aspect ratio of your scroll items. Large scroll padding values could lead to a situation where part of the next scroll item becomes visible at the end of the current scrollport, potentially creating a confusing user experience. Adjust your scroll padding values accordingly to ensure a clear transition between scroll items.

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

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