CSS Lastnost: scroll-margin-inline

Lastnost scroll-margin-inline podaja razdaljo v smeri vrstice med položajem pripenjanja in zabojnikom. Pomeni, da, ko prenehamo z drsenjem, se bo drsenje hitro prilagodilo in ustavilo na določeni razdalji v smeri vrstice med položajem zaskočitve in zabojnikom. Lastnost scroll-margin-inline je skrajšana lastnost za scroll-margin-inline-start in scroll-margin-inline-end lastnosti. Vrednosti za lastnost scroll-margin-inline je mogoče nastaviti na različne načine.

Če ima lastnost dve vrednosti: scroll-margin-inline: 100px 100px;

Razdalja na začetku je 100px.
Razdalja na koncu je 100px.

Če ima lastnost eno vrednost: scroll-margin-inline: 100px;

Razdalja na začetku in koncu je 100px.

Če želimo videti učinek lastnosti scroll-margin-inline, morata biti scroll-margin-inline in scroll-snap-align lastnosti nastavljeni na podrejenih elementih, lastnost scroll-snap-type pa mora biti nastavljen na nadrejenem elementu.

PRIMER

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

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

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

        /* Primer B: z odmikom */
        .z-odmikom {
            background-color: #4ECDC4;
            scroll-margin-inline: 100px;
        }
    </style>
</head>
<body>
    <h1 style="text-align: center">Primerjava scroll-margin-inline</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 levo in desno po okvirju</p>
        <p>2. Opazuj, kako se turkizni bloki ustavijo 100px od roba</p>
        <p>3. Rdeči bloki se ustavijo tik ob robu</p>
    </div>
</body>
</html>

REZULTAT