CSS scroll-padding-block-end Property

Description

The scroll-padding-block-end property adjusts the scroll container’s logical “end” inset along the block axis so that the browser treats the scroll snapport (the area used for snapping and alignment) as if it were smaller by that inset at the block end. In practical terms, it moves the effective stopping point away from the container edge on the block-end side so scrolled or snapped items align with that inset rather than flush with the container edge. Its effect follows the block axis defined by the element’s writing mode and text direction, so the physical edge that corresponds to “block end” depends on the container’s writing-mode/flow.

This property is primarily used to create reserved space for UI elements (for example sticky headers or overlays) without changing layout geometry. By adding an inset on the block end, you can prevent snapped or programmatically scrolled-to content from being hidden behind such overlays: items will stop earlier and remain visible below the overlay. It works together with container-level scroll padding controls like scroll-padding and the axis-specific shorthand scroll-padding-block, letting you target only the block-end side when you need asymmetric insets.

Note that scroll-padding-block-end only affects the scrollport used for snapping and alignment — it does not alter the element’s layout dimensions or create visual spacing the way ordinary box padding or margins do. For per-item adjustments that affect how an individual element is positioned into view, use the child-focused property scroll-margin. And to control how a particular item lines up with the adjusted snapport (start, center, end), you combine container insets with each item’s alignment setting such as scroll-snap-align.

Because it is a logical property, scroll-padding-block-end is especially helpful in internationalized layouts: a single declaration adapts to different writing modes and directions without requiring separate physical-side rules. Use it when you need predictable snap and scroll alignment behavior that respects overlays and different block-flow orientations while keeping layout and box metrics unchanged.

Definition

Initial value: auto
Applies to: scroll containers
Inherited: no
Computed value: as specified
Animatable: by computed value type
JavaScript syntax: object.style.scrollPaddingBlockEnd

Interactive Demo

scroll-padding-block-end: 0;

scroll-padding-block-end: 20px;

scroll-padding-block-end: 2em;

1

2

3

Scroll »

Syntax

scroll-padding-block-end: auto | <length-percentage [0,∞]>

Values

autoThe offset is determined by the user agent. This will generally be 0px, but a user agent is able to detect and do something else if a non-zero value is more appropriate.
<length-percentage>An inwards offset from the corresponding edge of the scrollport, as a valid length or a percentage.

Example

HTML

<div class='demo'>

    <h2>scroll-padding-block-end demo</h2>

    <p>

        <a href='#last-no' class='link'>Jump to last (no padding)</a>

        <a href='#last-with' class='link'>Jump to last (with padding)</a>

    </p>



    <div class='columns'>

        <section class='viewport no-padding' aria-label='No scroll padding'>

            <h3 class='title'>No padding</h3>

            <div class='stack'>

                <div class='card'>Item 1</div>

                <div class='card'>Item 2</div>

                <div class='card'>Item 3</div>

                <div class='card'>Item 4</div>

                <div class='card' id='last-no'>Last item</div>

            </div>

        </section>



        <section class='viewport with-padding' aria-label='With scroll padding'>

            <h3 class='title'>With scroll-padding-block-end: 80px</h3>

            <div class='stack'>

                <div class='card'>Item 1</div>

                <div class='card'>Item 2</div>

                <div class='card'>Item 3</div>

                <div class='card'>Item 4</div>

                <div class='card' id='last-with'>Last item</div>

            </div>

        </section>

    </div>



    <p class='note'>

        Both scroll areas use scroll-snap with each card snapping to the block end.

        The right area reserves an extra 80px at the block end using scroll-padding-block-end.

    </p>

</div>

CSS

/* Layout */
* { box-sizing: border-box; }
body { font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial; margin: 20px; }
.demo { max-width: 1000px; margin: 0 auto; }
.columns { display: flex; gap: 20px; margin-top: 12px; }
.link { margin-right: 12px; color: #0366d6; text-decoration: none; }
.link:hover { text-decoration: underline; }
.note { margin-top: 12px; color: #444; font-size: 0.95rem; }

/* Scroll viewports */
.viewport {
    width: 48%;
    height: 320px;
    border: 1px solid #e1e4e8;
    border-radius: 8px;
    overflow-y: auto;
    background: linear-gradient(180deg, #fff, #fbfdff);

    /* enable scroll snap on the block axis */
    scroll-snap-type: y mandatory;
}

/* Title inside each viewport */
.title {
    margin: 0;
    padding: 12px 14px;
    font-size: 0.95rem;
    background: #f6f8fa;
    border-bottom: 1px solid #e6ebef;
}

/* Stack of cards */
.stack { padding: 0; margin: 0; }
.card {
    height: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    color: #0b1220;
    background: #ffffff;
    border-top: 1px solid #e6ebef;

    /* Snap each card to the block end of the scroll container */
    scroll-snap-align: end;
}

/* Visual difference between the two viewports */
.no-padding { scroll-padding-block-end: 0; }
.with-padding { scroll-padding-block-end: 80px; }

/* Small responsive tweak */
@media (max-width: 720px) {
    .columns { flex-direction: column; }
    .viewport { width: 100%; }
}

Result

Editor

Browser Support

The following information will show you the current browser support for the CSS scroll-padding-block-end property. Hover over a browser icon to see the version that first introduced support for this CSS property.