Vertikální a horizontální rolování jsou způsoby procházení webové stránky pomocí myši, touchpadu nebo prstu. Vertikální posouvání se používá, když obsah prvku přesahuje výšku kontejneru. Zatímco vodorovné posouvání se používá, když obsah v prvku přesahuje šířku kontejneru. Vertikální posouvání umožňuje uživatelům posouvat webovou stránku nahoru a dolů, zatímco horizontální posouvání umožňuje posouvání stránky doleva a doprava. Tailwind CSS poskytuje třídy nástrojů, které umožňují vertikální a horizontální posouvání na webových stránkách.
Tento článek bude příkladem:
Jak povolit svislé posouvání v Tailwindu?
Chcete-li v Tailwindu povolit svislé posouvání, použijte „ přetečení-y-scroll ” třída utility s požadovaným prvkem v programu HTML. Umožňuje vertikální posouvání a vždy zobrazuje posuvníky, pokud uživatel nezakázal „vždy viditelné“ posuvníky v nastavení systému.
Syntax
< živel třída = 'overflow-y-scroll ...' > ... živel >
Příklad: Povolení svislého posouvání
V tomto příkladu vytvoříme flex kontejner s některými flex položkami ve sloupci a použijeme „ přetečení-y-scroll 'utilita k tomu:
< tělo >
< div třída = 'flex flex-col overflow-y-scroll bg-purple-700 p-4 mx-14 mt-5 h-36' >
< div třída = 'bg-žlutá-400 p-2 m-2' > 1 div >
< div třída = 'bg-žlutá-400 p-2 m-2' > 2 div >
< div třída = 'bg-žlutá-400 p-2 m-2' > 3 div >
< div třída = 'bg-žlutá-400 p-2 m-2' > 4 div >
< div třída = 'bg-žlutá-400 p-2 m-2' > 5 div >
< div třída = 'bg-žlutá-400 p-2 m-2' > 6 div >
div >
tělo >
Zde v nadřazeném prvku
- “ flex ” se používá k úpravě velikostí podřízeného prvku na základě dostupného prostoru vytvořením flexibilního rozvržení.
- “ flex-col ” nastaví směr ohybu kontejneru na sloupec.
- “ přetečení-y-scroll ” umožňuje vertikální rolování.
- “ bg-purple-700 ” třída nastaví fialovou barvu na pozadí kontejneru.
- “ p-4 “ třída nastavuje 4 jednotky vycpávky na všech stranách kontejneru.
- “ mx-14 ” třída aplikuje 14 jednotek okraje na ose x kontejneru.
- “ mt-5 Třída ” aplikuje 5 jednotek okraje na horní část kontejneru.
- “ h-36 ” třída nastavuje výšku kontejneru na 36 jednotek.
V podřízeném prvku
- “ bg-žlutá-400 ” nastaví pozadí položek mřížky na žlutou.
- “ p-2 “ třída přidá 3 jednotky výplně k obsahu uvnitř flexibilních položek.
- “ m-2 Třída ” nastavuje u flexibilních položek rozpětí 2 jednotek.
Výstup
Ve výše uvedeném výstupu je vidět, že vertikální rolování bylo úspěšně povoleno.
Jak povolit vodorovné posouvání ve službě Tailwind?
Chcete-li v Tailwindu povolit vodorovné posouvání, použijte „ přetečení-x-scroll ” třída utility s konkrétním prvkem v programu HTML. Umožňuje horizontální posouvání a vždy zobrazuje posuvníky, pokud uživatel nezakázal „vždy viditelné“ posuvníky v nastavení systému.
Syntax
< živel třída = 'overflow-x-scroll ...' > ... živel >
Příklad: Povolení vodorovného posouvání
V tomto příkladu vytvoříme flex kontejner s několika flex položkami v řadě a použijeme „ přetečení-x-scroll 'utilita k tomu:
< tělo >< div třída = 'flex flex-row overflow-x-scroll space-x-24 bg-purple-700 p-4 mx-14 mt-5 h-36' >
< div třída = 'bg-žlutá-400 p-2 m-2' > 1 div >
< div třída = 'bg-žlutá-400 p-2 m-2' > 2 div >
< div třída = 'bg-žlutá-400 p-2 m-2' > 3 div >
< div třída = 'bg-žlutá-400 p-2 m-2' > 4 div >
< div třída = 'bg-žlutá-400 p-2 m-2' > 5 div >
< div třída = 'bg-žlutá-400 p-2 m-2' > 6 div >
div >
tělo >
Zde v nadřazeném prvku
Výstup
Výše uvedený výstup znamená, že horizontální rolování bylo úspěšně povoleno.
Závěr
Chcete-li v Tailwindu povolit svislé a vodorovné posouvání, „ přetečení-y-scroll ' a ' přetečení-x-scroll ” užitné třídy se používají resp. Tyto nástroje se aplikují na požadované prvky v programu HTML, aby umožnily svislé a vodorovné posouvání a vždy zobrazily posuvníky. Tento článek demonstroval metodu povolení svislého a vodorovného posouvání ve službě Tailwind.