CSS Lastnost: scroll-padding-left

Lastnost scroll-padding-left določa razdaljo od leve strani zabojnika do položaja pripenjanja na podrejenih elementih. Ta lastnost deluje le, če je položaj pripenjanja postavljen na levo stran podrejenega elementa. Če želimo videti učinek lastnosti scroll-padding-left, mora biti lastnost scroll-snap-align nastavljena na podrejene elemente, lastnosti scroll-padding-left 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‑left</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    
    <style>
        .scroll-container {
            width: 100%;
            height: 200px;
            overflow-x: auto;              
            overflow-y: hidden;
            border: 2px solid #333;
            display: flex;
            gap: 10px;
            padding: 10px;
            scroll-snap-type: x mandatory;
            scroll-padding-left: 80px;
        }
    
        .scroll-item {
            min-width: 250px;
            height: 100%;
            background: #2196F3;
            color: white;
            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 class="scroll-item">Sekcija 6</div>
        <div class="scroll-item">Sekcija 7</div>
        <div class="scroll-item">Sekcija 8</div>
    </div>
</body>
</html>

REZULTAT

Ta primer prikazuje delovanje lastnosti scroll-padding-left. Sivo območje na levi predstavlja območje odmika. Elementi se bodo pripeli na začetek vsebine z upoštevanjem tega odmika.
OPOMBA: Za premikanje levo/desno kliknite znotraj okna in uporabite smerne tipke ← → ali miško.

scroll-padding-left: px

Element 1

Element 2

Element 3

Element 4

Element 5

Območje scroll-padding-left: 200px