CSS Lastnost: scroll-margin-block

Lastnost scroll-margin-block določa razdaljo v smeri bloka 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 bloka, med položajem zaskočitve in zabojnikom. Lastnost scroll-margin-block je skrajšana lastnost za scroll-margin-block-start in scroll-margin-block-end lastnosti. Vrednosti za lastnost scroll-margin-block lahko nastavimo na različne načine.

Če ima lastnost dve vrednosti: scroll-margin-block: 120px 200px;

Razdalja na začetku je 120px.
Razdalja na koncu je 200px.

Če ima lastnost eno vrednost: scroll-margin-block: 120px;

Razdalja na začetku in koncu je 120px.

Če želimo videti učinek lastnosti scroll-margin-block, morata biti scroll-margin-block 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">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Demonstracija scroll-margin-block</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            font-family: Arial, sans-serif;
        }

        .header {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            background: #333;
            color: white;
            padding: 1rem;
            z-index: 100;
        }

        nav {
            position: fixed;
            top: 60px;
            left: 0;
            right: 0;
            background: #4CAF50;
            padding: 1rem;
            z-index: 90;
        }

        nav a {
            color: white;
            text-decoration: none;
            margin-right: 1rem;
        }

        main {
            color: #333333;
            margin-top: 120px; /* Prostor za header in nav */
            scroll-snap-type: y proximity;
        }

        section {
            min-height: 100vh;
            padding: 2rem;
            scroll-snap-align: start;
            border-bottom: 2px solid #ccc;
            position: relative;
        }

        /* Različni scroll-margin-block primeri */
        .no-margin {
            background-color: #ffcdd2;
            scroll-margin-block: 0;
        }

        .nav-margin {
            background-color: #c8e6c9;
            scroll-margin-block: 120px; /* Višina header-ja + nav */
        }

        .large-margin {
            background-color: #bbdefb;
            scroll-margin-block: 200px;
        }

        /* Vizualni indikator za scroll-margin */
        .margin-indicator {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            border-top: 3px dashed rgba(0,0,0,0.3);
            padding: 5px;
            font-size: 0.8em;
            color: #666;
        }

        /* Dodatni stil za boljšo berljivost */
        h2 {
            margin-top: 0;
        }

        .content {
            max-width: 800px;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <header class="header">
        <h1>Demonstracija scroll-margin-block</h1>
    </header>

    <nav>
        <a href="#section1">Brez odmika</a>
        <a href="#section2">Standardni odmik</a>
        <a href="#section3">Veliki odmik</a>
    </nav>

    <main>
        <section id="section1" class="no-margin">
            <div class="content">
                <h2>Sekcija brez odmika</h2>
                <p>Ta sekcija nima scroll-margin-block odmika (vrednost: 0).</p>
                <p>Opazili boste, da se vsebina skrije pod navigacijo.</p>
            </div>
        </section>

        <section id="section2" class="nav-margin">
            <div class="margin-indicator">↕️ scroll-margin-block: 120px</div>
            <div class="content">
                <h2>Sekcija s standardnim odmikom</h2>
                <p>Ta sekcija ima scroll-margin-block nastavljen na 120px, kar je enako višini glave in navigacije.</p>
                <p>Vsebina bo vedno vidna pod navigacijo.</p>
            </div>
        </section>

        <section id="section3" class="large-margin">
            <div class="margin-indicator">↕️ scroll-margin-block: 200px</div>
            <div class="content">
                <h2>Sekcija z velikim odmikom</h2>
                <p>Ta sekcija ima večji scroll-margin-block (200px).</p>
                <p>Opazili boste večji razmik med navigacijo in vsebino ob scroll-anju.</p>
            </div>
        </section>
    </main>
</body>
</html>

REZULTAT