CSS Lastnost: scroll-margin-block-start

Lastnost scroll-margin-block-start določa odmik v smeri bloka med položajem zaskočitve in zabojnikom. Ko uporabnik preneha z drsenjem, se bo vsebina samodejno poravnala tako, da bo upoštevala določeno razdaljo med začetkom podrejenega elementa in robom zabojnika. Za pravilno delovanje te lastnosti sta potrebni dve stvari: na podrejenih elementih morata biti nastavljeni lastnosti scroll-margin-block-start in scroll-snap-align, medtem ko mora biti na nadrejenem elementu nastavljena lastnost scroll-snap-type.

PRIMER

<!DOCTYPE html>
<html lang="sl">
<head>
    <meta charset="UTF-8">
    <title>Primer scroll-margin-block-start</title>
    <style>
        /* Glavni vsebovalnik */
        .drsni-okvir {
            width: 400px;
            height: 300px;
            border: 5px solid black;
            margin: 50px auto;
            overflow-y: scroll;
            scroll-snap-type: y mandatory;
        }

        /* Barvni bloki */
        .blok {
            width: 100%;
            height: 200px;
            font-size: 24px;
            display: flex;
            justify-content: center;
            align-items: center;
            color: white;
            scroll-snap-align: start;
        }

        /* Primer A: brez odmika */
        .brez-odmika {
            background-color: #FF6B6B;
        }

        /* Primer B: z odmikom */
        .z-odmikom {
            background-color: #4ECDC4;
            scroll-margin-block-start: 100px;
        }
    </style>
</head>
<body>
    <h1 style="text-align: center">Primerjava scroll-margin-block-start</h1>
    
    <div class="drsni-okvir">
        <div class="blok brez-odmika">Brez odmika</div>
        <div class="blok z-odmikom">Z odmikom 100px</div>
        <div class="blok brez-odmika">Brez odmika</div>
        <div class="blok z-odmikom">Z odmikom 100px</div>
        <div class="blok brez-odmika">Brez odmika</div>
        <div class="blok brez-odmika">Brez odmika</div>
    </div>
    
    <div style="text-align: center; margin: 20px;">
        <p><strong>Navodila:</strong></p>
        <p>1. Počasi drsi navzdol po okvirju.</p>
        <p>2. Opazuj, kako se turkizni bloki ustavijo 100px pred začetkom.</p>
        <p>3. Rdeči bloki se ustavijo tik ob robu.</p>
    </div>
</body>
</html>

REZULTAT