Moderní tvorba webových aplikací

O webu

Scrollování

Návody, jak reagovat na rolování uživatele po stránce, scrollování zakázat nebo podle něj zvýrazňovat odkazy.

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

Jak dát uživateli informaci, že je možné někam scrollovat.

10 minut

Plynulé scrollování na obsah

Jak vytvořit plynulé odrolování na určitou část stránky.

6 minut

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

Jak zabránit, aby obsah stránky poskakoval v závislosti na posuvníku.

8 minut

Jak skrýt posuvník v <iframe>

Jak pomocí CSS skrýt scrollbar u stránky vložené přes <iframe>.

2 minuty

Jak funguje CSS position: sticky

CSS sticky posice umožňuje bez JS zafixovat element ke kraji okna při rolování.

7 minut

Barva podle odrolování na stránce

Jak pouze v CSS měnit pozadí elementu v závislosti na odscrollování na stránce.

3 minuty

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

CSS vlastnost overflow-anchor umožňuje nastavit, jak si má prohlížeč pamatovat, kam bylo odscrollováno.

3 minuty

Šířka rolovací lišty

Jaká je šířka posuvníku v různých prohlížečích.

3 minuty

Vlastní vzhled scrollbaru

Jaké jsou možnosti ve stylování vzhledu posuvníku.

6 minut

Odrolování bez JavaScriptu

Jak odscrollovat na určitou část stránky bez JavaScriptu.

4 minuty

Nekonečné scrollování

Je lepší nekonečné rolování, klasické stránkování nebo tlačítko „Zobrazit další“?

12 minut

Jednostránkový web

Kdy vytvářet web o jediné stránce. Jaké jsou výhody a nevýhody.

9 minut

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

CSS vlastnost scroll-snap dokáže řídit rolování, aby přeskakovalo mezi jednotlivými elementy.

6 minut

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

Jak JavaScriptem zjistit, jakým směrem uživatel na stránce roluje.

2 minuty

Odkaz na kotvu a fixní hlavička

Při použití fixního menu/hlavičky se stane nepěkná věc, že při odkazu na kotvu je cíl skryt pod menu. Co s tím?

3 minuty

Změna location.hash bez posunu stránky

Jak změnit location.hash bez posunutí stránky.

2 minuty

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

Někdy se hodí zamezit uživateli v rolování, jaké existují možnosti?

3 minuty

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

U jednostránkových webů s fixní navigací (s odkazy na #kotvy) může být vhodné právě viditelnou (aktivní) položku zvýraznit.

4 minuty

Odrolování na určitý HTML tag

Nestačí-li běžné odrolování na HTML #kotvu, přichází na řadu JavaScript.

3 minuty

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

Pokud se v rámci stránky používají odkazy na jednotlivé #části, může být vhodné zvýrazněním ukázat, kam odkaz mířil.

3 minuty

Web jecas.cz píše Bohumil Jahoda, kontakt
Seznam všech článků
2013–2025