CSS scroll-padding-inline-start Optimize Scroll Containers

The CSS scroll-padding-inline-start property defines the offset for the start edge in the inline dimension of a scroll container.

It helps exclude regions obscured by fixed elements and adds space between content and edges.

Supports auto, length, percentage, and global values.

Introduction

The scroll-padding-inline-start CSS property sets the padding at the start of the scrollable area. This helps ensure important content stays visible and adds space between the content and the scroll container’s edges. It’s useful for improving user experience, especially when dealing with fixed elements like toolbars.

Specification

The scroll-padding-inline-start property is part of the CSS Scroll Snap Module Level 1, which controls scrolling behavior.

For more details, check out the official specification:

CSS Scroll Snap Module Level 1 - padding-longhands-logical

Description

The scroll-padding-inline-start property sets the padding at the start of the scrollable area. This helps ensure important content stays visible and adds space between the content and the scroll container’s edges.

You can use various values like auto, length values (e.g., pixels, em units), percentages, and global values (e.g., inherit, initial, revert).

Syntax

Here’s how to use the scroll-padding-inline-start property in your CSS:

/* Keyword value */
scroll-padding-inline-start: auto;

/* Length values */
scroll-padding-inline-start: 10px;
scroll-padding-inline-start: 1em;
scroll-padding-inline-start: 10%;

/* Global values */
scroll-padding-inline-start: inherit;
scroll-padding-inline-start: initial;
scroll-padding-inline-start: revert;
scroll-padding-inline-start: revert-layer;
scroll-padding-inline-start: unset;

Values

You can use several types of values:

<length-percentage>: Sets an inwards offset from the start edge. This can be a length (e.g., 10px) or a percentage (e.g., 10%).
auto: The offset is determined by the browser, usually 0px.
Global values: Includes inherit, initial, revert, revert-layer, and unset.

Formal Definition

The scroll-padding-inline-start property defines the padding at the start of the scrollable area.

Initial value: auto
Applies to: Scroll containers
Inherited: No
Percentages: Relative to the scroll container’s scrollport
Computed value: As specified
Animation type: By computed value type

Browser Compatibility

The scroll-padding-inline-start property is widely supported across major browsers:

Firefox: Supported since version 68.
Chrome: Supported since version 69.
Edge: Supported since version 79.
Opera: Supported since version 56.
Safari: Supported since version 15.

Example

Here’s an example to illustrate how the scroll-padding-inline-start property works:

HTML

<!DOCTYPE html>
<html>
<head>
    <style>
        .geeks {
            width: 270px;
            height: 300px;
            scroll-snap-align: none start;
        }

        .Website {
            width: 300px;
            height: 300px;
            border: 2px solid green;
            overflow-x: auto;
            overflow-y: hidden;
            white-space: nowrap;
            scroll-snap-type: x mandatory;
            scroll-padding-inline-start: 90px; /* Adding padding at the start edge */
        }
    </style>
</head>
<body>
    <div class="Website">
        <img src="WebsiteUrl" class="geeks">
        <img src="WebsiteUrl" class="geeks">
        <img src="WebsiteUrl" class="geeks">
        <img src="WebsiteUrl" class="geeks">
        <img src="WebsiteUrl" class="geeks">
        <img src="WebsiteUrl" class="geeks">
    </div>
</body>
</html>

Explanation

In this example:

The .Website container has horizontal scrolling enabled and vertical scrolling disabled.
The scroll-snap-type property is set to x mandatory, making the container snap to the nearest scroll snap position along the x-axis.
The scroll-padding-inline-start property is set to 90px, adding 90 pixels of padding at the start edge of the scroll container.
Inside the .Website container, there are several images with the class .geeks, each styled with specific width and height.

When you scroll through the images in the .Website container, you’ll see a 90-pixel padding at the start edge, thanks to the scroll-padding-inline-start property. This padding ensures the first image has some breathing room, enhancing the visual experience.

Supported Browsers

The scroll-padding-inline-start property is supported across modern browsers:

Firefox: Supported since version 68.
Chrome: Supported since version 69.
Edge: Supported since version 79.
Opera: Supported since version 56.
Safari: Supported since version 15.

Using the scroll-padding-inline-start property, web developers can create more user-friendly and visually appealing interfaces, ensuring important content stays visible across different browsers and devices.