CSS Lastnost: scroll-padding-top

Lastnost scroll-padding-top določa razdaljo od vrha zabojnika do položaja pripenjanja na podrejenih elementih. Ta lastnost deluje le, če je položaj pripenjanja postavljen na vrh podrejenega elementa. Če želimo videti učinek lastnosti scroll-padding-top, mora biti lastnost scroll-snap-align nastavljena na podrejene elemente, lastnosti scroll-padding-top in scroll-snap-type pa morata biti nastavljeni na nadrejenem elementu.

PRIMER

<!DOCTYPE html>
<html lang="sl">
<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">Sekcija 1</div>
        <div class="scroll-item">Sekcija 2</div>
        <div class="scroll-item">Sekcija 3</div>
        <div class="scroll-item">Sekcija 4</div>
        <div class="scroll-item">Sekcija 5</div>
    </div>
</body>
</html>

REZULTAT

Ta primer prikazuje delovanje lastnosti scroll-padding-top. Sivo območje na vrhu predstavlja območje odmika. Elementi se bodo pripeli na vrh vsebine z upoštevanjem tega odmika.

scroll-padding-top: px

Element 1

Element 2

Element 3

Element 4

Element 5

Element 6

Element 7

Območje scroll-padding-top: 200px