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.

Všechny články z kategorie

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

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

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

Šířka posuvníku

Šířka rolovací lišty

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

Vlastní styl posuvníku

Vlastní vzhled scrollbaru

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

Odrolování bez JavaScriptu

Odrolování bez JavaScriptu

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

Nekonečné rolování

Nekonečné scrollování

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

Jednostránkový web

Jednostránkový web

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

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

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

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

Poskakování kvůli scrollbaru

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

Jak zabránit, aby centrovaný obsah stránky měli posici v závislosti na posuvníku.

Detekce směru scrollování

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

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

Odkaz na kotvu a fixní menu

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?

Změna location.hash bez odrolování stránky

Změna location.hash bez posunu stránky

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

Zakázat rolování stránky

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

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

Zvýraznění podle rolování

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.

Odrolování na element

Odrolování na určitý HTML tag

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

Zvýraznění aktivní kotvy

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.