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.

Opravdu
hodně
dlouhý
obsah
s posuvníkem

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?

Jedna možnost je volit výšku tak, aby pokud možno usekla kus obsahu.
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).

První řádek obsahu
Druhý řádek obsahu
Třetí řádek obsahu - tento je částečně oříznutý
Čtvrtý řádek obsahu
Pátý řádek obsahu

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:

Dlouhý obsah který pokračuje
další řádek
ještě další řádek
a další obsah
hodně dlouhý obsah
ještě více obsahu
konec obsahu

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

Dlouhý obsah s indikátorem scrollování
Druhý řádek obsahu
Třetí řádek obsahu
Čtvrtý řádek obsahu
Pátý řádek obsahu
Šestý řádek obsahu
Sedmý řádek obsahu
Osmý řádek obsahu
Devátý řádek obsahu
Konec obsahu

↓ více

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:

Karta 1

Karta 2

Karta 3

Karta 4

Karta 5

→ více

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:

Dlouhý článek s progress barem

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.

Totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt.

Explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit.

Sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.

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ě.

Scrollování – ovládání a reakce na rolování stránky

Zvýraznění aktivní sekce při rolování

Znázornění možnosti scrollování

Plynulé scrollování na obsah

Poskakování stránky kvůli posuvníku

Jak skrýt posuvník v <iframe>

Jak funguje CSS position: sticky

Barva podle odrolování na stránce

Zachování posice scrollování overflow-anchor

Šířka rolovací lišty

Vlastní vzhled scrollbaru

Odrolování bez JavaScriptu

Nekonečné scrollování

Jednostránkový web

Přichytávací rolování v CSS

Zjištění směru rolování

Odkaz na kotvu a fixní hlavička

Změna location.hash bez posunu stránky

Jak zakázat scrollování na stránce

Označení odkazu na kotvu, pokud je na ní odrolováno

Odrolování na určitý HTML tag

Zvýraznění aktivované kotvy (:target)

Novinky e-mailem

Jak skrýt posuvník v `<iframe>`

Jak funguje CSS `position: sticky`

Zachování posice scrollování `overflow-anchor`

Změna `location.hash` bez posunu stránky

Zvýraznění aktivované kotvy (`:target`)