CSS Lastnost: scroll-padding-inline-end

Lastnost scroll-padding-inline-end določa razdaljo v smeri vrstice od konca zabojnika do položaja pripenjanja na podrejenih elementih. Pomeni, da, ko se prenehamo pomikati, se drsnik hitro prilagodi in ustavi na določeni točki med položajem zaskočitve in zabojnikom. Če želimo videti učinek te lastnosti moramo lastnost scroll-snap-align dodati podrejenim elementom, lastnosti scroll-padding-inline-start in scroll-snap-type pa nadrejenemu elementu.

PRIMER

<!DOCTYPE html>
<html lang="sl">
<head>
    <meta charset="UTF-8">
    <title>scroll-padding-inline-end</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        html, body {
            width: 100%;
            height: 100%;
            overflow: hidden;
        }

        .scroll-container {
            width: 100%;
            height: 100vh;
            padding: 10px;
            overflow-y: hidden;
            overflow-x: auto;
            white-space: nowrap;
            scroll-snap-type: x mandatory;
            scroll-padding-inline-end: 100px;
        }

        .element-pomikanja {
            display: inline-flex;
            width: 85%;
            height: calc(100% - 20px);
            margin-right: 20px;
            scroll-snap-align: end;
            
            /* Dodane lastnosti za centriranje */
            justify-content: center;
            align-items: center;
            font-size: 2rem;
            color: #333;
        }

        .element1 { background-color: #FFB74D; }
        .element2 { background-color: #9CCC65; }
        .element3 { background-color: #64B5F6; }
    </style>
</head>
<body>
    <div class="scroll-container">
        <div class="element-pomikanja element1">Element 1</div>
        <div class="element-pomikanja element2">Element 2</div>
        <div class="element-pomikanja element3">Element 3</div>
        <div class="element-pomikanja element1">Element 4</div>
        <div class="element-pomikanja element2">Element 5</div>
        <div class="element-pomikanja element3">Element 6</div>
    </div>
</body>
</html>

REZULTAT