CSS Property: scroll-padding

The scroll-padding property defines the distance from the container to the snap position of child elements. This means that when scrolling stops, the scroll will quickly adjust and stop at a specified distance from the container to the snap position of the focused child element. The scroll-padding property is a shorthand for scroll-padding-top, scroll-padding-bottom, scroll-padding-left, and scroll-padding-right properties. The value can be set in various ways.

EXAMPLE

<!DOCTYPE html>
<html lang="sl">
<head>
    <meta charset="UTF-8">
    <title>Scroll‑padding demo</title>
    <style>
        nav {
            padding: 12px;
        }
        
        nav a {
            background-color: #fe5849;
            color: #333333;
            padding: 12px;
            text-decoration: none;
        }
        
        nav a:hover {
            background-color: #3fb950;
        }
        
        .container {
            height: 300px;
            overflow-y: auto;
            scroll-snap-type: y mandatory;
            border: 2px solid #444;
            padding: 20px;
            scroll-padding-top: 80px;
        }

        .section {
            scroll-snap-align: start;
            min-height: 200px;
            margin-bottom: 30px;
            background-color: #f0f0f0;
            color: #333333;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.2rem;
            border-radius: 8px;
        }
    </style>
</head>
<body>
<h2>Demo: scroll‑padding + scroll‑snap</h2>

<nav>
    <a href="#sec1">Section 1</a>
    <a href="#sec2">Section 2</a>
    <a href="#sec3">Section 3</a>
    <a href="#sec4">Section 4</a>
    <a href="#sec5">Section 5</a>
</nav>

<div class="container">
    <section id="sec1" class="section">Section 1</section>
    <section id="sec2" class="section">Section 2</section>
    <section id="sec3" class="section">Section 3</section>
    <section id="sec4" class="section">Section 4</section>
    <section id="sec5" class="section">Section 5</section>
</div>
</body>
</html>

RESULT

If the property has four values: scroll-padding: 100px 150px 200px 250px;

Top distance is 100px.
Right distance is 150px.
Bottom distance is 200px.
Left distance is 250px.

If the property has three values: scroll-padding: 150px 100px 200px;

Top distance is 150px.
Right and left distance is 100px.
Bottom distance is 200px.

If the property has two values: scroll-padding: 100px 200px;

Top and bottom distance is 100px.
Right and left distance is 200px.

If the property has one value: scroll-padding: 150px;

All four distances are equal, 150px.

To see the effect of the scroll-padding property, the scroll-snap-align property must be set on child elements, while scroll-padding and scroll-snap-type properties must be set on the parent element.

Comparison of Different scroll-padding Values:

Instructions for use:

The dashed red area shows the scroll-padding space
Scroll through each box and observe how elements "snap" at different distances
Red numbers show the actual offset values

scroll-padding: 150px

150px

Element 1

Element 2

Element 3

Element 4

scroll-padding: 100px 200px

100px

200px

100px

200px

Element 1

Element 2

Element 3

Element 4

scroll-padding: 150px 100px 200px

150px

100px

200px

100px

Element 1

Element 2

Element 3

Element 4

scroll-padding: 100px 150px 200px 250px

100px

150px

200px

250px

Element 1

Element 2

Element 3

Element 4