CSS scroll-padding-inline-end Enhance Scroll Container Layout

Learn about CSS scroll-padding-inline-end, a powerful property for controlling padding at the end of scroll containers.

Discover its use cases and available options.

Introduction

The scroll-padding-inline-end property in CSS helps control the padding at the end edge of a scroll container in the inline dimension. Introduced in July 2019, it’s widely supported and ensures that content remains visible and not obstructed by other elements, enhancing user experience.

Definition and Purpose

The scroll-padding-inline-end property sets the padding at the end edge of a scroll container in the inline dimension. Its purpose is to ensure important content remains visible and accessible by excluding regions that might be obscured by other elements, such as fixed-positioned toolbars or sidebars.

Syntax

The syntax for the scroll-padding-inline-end property is straightforward:

scroll-padding-inline-end: auto;
scroll-padding-inline-end: 10px;
scroll-padding-inline-end: 1em;
scroll-padding-inline-end: 10%;
scroll-padding-inline-end: inherit;
scroll-padding-inline-end: initial;
scroll-padding-inline-end: revert;
scroll-padding-inline-end: revert-layer;
scroll-padding-inline-end: unset;

Values

The scroll-padding-inline-end property accepts various values:

`<length-percentage>`

Length Units: Use units like pixels (px), ems (em), or viewport units (vh).
Percentages: Relative to the scroll container’s scrollport.

scroll-padding-inline-end: 10px;
scroll-padding-inline-end: 1em;
scroll-padding-inline-end: 10%;

`auto`

The user agent determines the offset, generally set to 0px.

scroll-padding-inline-end: auto;

Global Values

inherit: Inherits from the parent element.
initial: Sets to the initial value (auto).
revert: Resets to the user agent’s default.
revert-layer: Resets to the value established by the user at the corresponding layer.
unset: Resets to the natural value.

scroll-padding-inline-end: inherit;
scroll-padding-inline-end: initial;
scroll-padding-inline-end: revert;
scroll-padding-inline-end: revert-layer;
scroll-padding-inline-end: unset;

Formal Definition

Property	Value
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

Formal Syntax

scroll-padding-inline-end = auto | <length-percentage>

<length-percentage> = <length> | <percentage>

Browser Compatibility

The scroll-padding-inline-end property is widely supported:

Firefox: Version 68 and above.
Chrome: Version 69 and above.
Edge: Version 79 and above.
Opera: Version 56 and above.
Safari: Version 15 and above.

Example Usage

Here’s an example demonstrating the scroll-padding-inline-end property:

HTML

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

        .Website {
            width: 300px;
            height: 300px;
            border: 2px solid green;
            overflow-x: auto;
            overflow-y: hidden;
            white-space: nowrap;
            scroll-snap-type: x mandatory;
        }
    </style>
</head>
<body>
    <div class="Website" style="scroll-padding-inline-end: 90px;">
        <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>

Example Syntax

Here are some ways to use the scroll-padding-inline-end property:

/* Using auto */
scroll-padding-inline-end: auto;

/* Using length units */
scroll-padding-inline-end: 10px;
scroll-padding-inline-end: 1em;

/* Using percentage */
scroll-padding-inline-end: 10%;

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