CSS Property: scroll-padding-top

The scroll-padding-top property defines the distance from the top of the container to the snap position of child elements. This property only works when the snap position is set to the top of the child element. To see the effect of the scroll-padding-top property, the scroll-snap-align property must be set on child elements, while both scroll-padding-top and scroll-snap-type properties must be set on the parent element.

EXAMPLE

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>scroll‑padding‑top – učinek</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    
    <style>
        .scroll-container {
            max-width: 100%;
            height: 100%;
            overflow-x: hidden;
            overflow-y: auto;
            border: 2px solid #333;
            display: flex;
            flex-direction: column;
            gap: 10px;
            padding: 10px;
            scroll-snap-type: y mandatory;
            scroll-padding-top: 80px;
            position: relative;
        }
    
        .scroll-item {
            min-height: 250px;
            background: #2196F3;
            color: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 20px;
            border-radius: 8px;
            flex-shrink: 0;
            scroll-snap-align: start;
        }
    </style>
</head>

<body>
    <div class="scroll-container">
        <div class="scroll-item">Section 1</div>
        <div class="scroll-item">Section 2</div>
        <div class="scroll-item">Section 3</div>
        <div class="scroll-item">Section 4</div>
        <div class="scroll-item">Section 5</div>
    </div>
</body>
</html>

RESULT

This example shows how the scroll-padding-top property works. The gray area at the top represents the padding area. Elements will snap to the top of the content considering this padding.

scroll-padding-top: px

Item 1

Item 2

Item 3

Item 4

Item 5

Item 6

Item 7

Scroll-padding-top area: 200px