Přidat nějakému bloku na stránce posuvník je často snadné řešení problémů, kdy na daném místě může být obsah s hodně proměnlivou délkou. Ve světě responsivního designu a rozmanitých zařízení je to navíc velmi praktické řešení.

Typické případy použití zahrnují:

• Uživatelský obsah – komentáře, zprávy, popisy produktů
• Datové tabulky s mnoha sloupci, které se nevejdou na menší obrazovky
• Navigační menu s velkým počtem položek
• Seznamy produktů nebo článků v boční liště
• Kód nebo logy v administračních rozhraních
• Galerie obrázků v horizontálním layoutu

Je-li obsah plně pod kontrolou tvůrce webu, lze a je dobré těmto situacím předcházet promyšleným designem. Nicméně v reálných aplikacích to často není možné.

Přidat posuvník čemukoliv jde velmi snadno – vlastností overflow: auto nebo overflow: scroll. Rozdíl je v tom, že auto zobrazí posuvník pouze při potřebě, zatímco scroll ho zobrazuje vždy.

Problém nastává s tím, že uživatel nemusí posuvník postřehnout a vůbec ho nemusí napadnout, že obsah někam pokračuje.

Co s tím?

1. Jedna možnost je volit výšku tak, aby pokud možno usekla kus obsahu.
2. Druhá možnost je přidat indikátor.

Useknutí řádku

Pokud nastavíme výšku kontejneru tak, aby byla menší než výška obsahu, ale přitom usekla obsah uprostřed řádku nebo elementu, uživatel rychle pochopí, že obsah pokračuje.

Zde jde dobře využít kombinace velikosti písma (font-size) a výšky řádku (line-height).

Toto řešení funguje dobře zejména u textového obsahu, kde je jasně vidět, že text pokračuje.

Scroll indikátor

Druhou možností je přidat visuální indikátor, který uživateli napoví, že je možné scrollovat. Může to být například:

• Gradient přechod na konci obsahu indikující jeho pokračování
• Šipka nebo jiná ikona

Gradient přechod

Nejelegantnějším řešením bývá gradient, který postupně mizí směrem k okraji kontejneru:

Docílit tohoto efektu jde přechodem z průhledné do barvy pozadí bloku.

JavaScript řešení

Pro pokročilejší indikaci můžeme použít JavaScript, který bude zobrazovat indikátor pouze tehdy, když je skutečně co scrollovat:

function setupScrollIndicator(container) {
    const indicator = container.querySelector('.scroll-indicator');
    
    function updateIndicator() {
        const isScrollable = container.scrollHeight > container.clientHeight;
        const isAtBottom = container.scrollTop + container.clientHeight >= container.scrollHeight - 1;
        // -1 kompenzuje možné zaokrouhlovací chyby v prohlížeči
        
        if (isScrollable && !isAtBottom) {
            indicator.style.opacity = '1';
        } else {
            indicator.style.opacity = '0';
        }
    }
    
    container.addEventListener('scroll', updateIndicator);
    updateIndicator();
}

Vysvětlení klíčových částí kódu:

• scrollHeight – celková výška obsahu včetně skryté části
• clientHeight – viditelná výška kontejneru
• scrollTop – aktuální pozice scrollu od vrcholu
• -1 na konci kompenzuje zaokrouhlovací chyby prohlížeče při práci se subpixely

Horizontální scrollování

Horizontální scrollování má svá specifika a často je problematičtější než vertikální:

Základní implementace

Pro horizontální scrollování se používá overflow-x, současně je potřeba zabránit zalomení obsahu:

.horizontal-scroll {
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    /* Alternativně pro flex layout */
    display: flex;
    flex-wrap: nowrap;
}

Pro horizontální scrollování můžeme použít podobné indikátory, jen orientované jinak:

JavaScript pro horizontální scroll

Detekce horizontálního scrollování je podobná vertikálnímu, jen používáme jiné vlastnosti:

function setupHorizontalScrollIndicator(container) {
    const indicator = container.querySelector('.horizontal-indicator');
    
    function updateIndicator() {
        const isScrollable = container.scrollWidth > container.clientWidth;
        const isAtEnd = container.scrollLeft + container.clientWidth >= container.scrollWidth - 1;
        
        if (isScrollable && !isAtEnd) {
            indicator.style.opacity = '1';
        } else {
            indicator.style.opacity = '0';
        }
    }
    
    container.addEventListener('scroll', updateIndicator);
    updateIndicator();
}

Scroll snapping

Pro horizontální scrollování se často hodí scroll snapping pro přichycení na konkrétní položky:

.horizontal-snap {
    scroll-snap-type: x mandatory;
    overflow-x: auto;
    display: flex;
}

.horizontal-snap > * {
    scroll-snap-align: start;
    flex-shrink: 0;
}

Progress bar pro scroll

Pokročilejší technikou je zobrazení progress baru, který ukazuje, jaká část obsahu už byla přečtena:

function createScrollProgress(container) {
    const progressBar = document.createElement('div');
    progressBar.className = 'scroll-progress';
    progressBar.style.cssText = `
        position: absolute;
        top: 0;
        left: 0;
        height: 3px;
        background: #3498db;
        width: 0%;
        transition: width 0.1s ease;
        z-index: 10;
    `;
    
    container.style.position = 'relative';
    container.appendChild(progressBar);
    
    container.addEventListener('scroll', () => {
        const scrollPercent = (container.scrollTop / 
            (container.scrollHeight - container.clientHeight)) * 100;
        progressBar.style.width = Math.min(scrollPercent, 100) + '%';
    });
}

Závěr a doporučení

Při návrhu rozhraní s možností scrollování je důležité myslet na celkovou uživatelskou zkušenost:

Nejjednodušší řešení spočívá v přesném nastavení výšky kontejneru tak, aby část obsahu byla uříznuta. Pro složitější případy lze použít visuální indikátory jako barevné přechody nebo ikony zobrazované dle odrolování.

Nejlepší scroll indikátor je ten, který uživatel ani nepotřebuje – promyšlený design obsahu a layoutu může často eliminovat nutnost scrollování úplně.