CSS Lastnost: scroll-margin-inline-end

Lastnost scroll-margin-inline-end določa razdaljo v smeri vrstice med položajem pripenjanja in zabojnikom. To 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 na koncu podrejenega elementa in zabojnikom. Če želimo videti učinek lastnosti scroll-margin-inline-end, morata biti scroll-margin-inline-end 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-end</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: 300px;
            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-end: 100px;
        }
    </style>
</head>
<body>
    <h1 style="text-align: center">Primerjava scroll-margin-inline-end</h1>
    
    <div class="drsni-okvir">
        <div class="blok brez-odmika">Brez končnega odmika</div>
        <div class="blok z-odmikom">S končnim odmikom 100px</div>
        <div class="blok brez-odmika">Brez končnega odmika</div>
        <div class="blok z-odmikom">S končnim odmikom 100px</div>
        <div class="blok brez-odmika">Brez končnega odmika</div>
        <div class="blok brez-odmika">Brez končnega 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 desnega roba</p>
        <p>3. Rdeči bloki se ustavijo tik ob desnem robu</p>
    </div>
</body>
</html>

REZULTAT