A függőleges és vízszintes görgetés segítségével navigálhat egy weboldalon egér, érintőpad vagy ujj segítségével. A függőleges görgetést akkor alkalmazzák, ha egy elem tartalma meghaladja a tartály magasságát. Míg a vízszintes görgetés akkor használatos, ha az elemen belüli tartalom meghaladja a tároló szélességét. A függőleges görgetés lehetővé teszi a felhasználók számára a weboldal fel-le mozgatását, míg a vízszintes görgetés lehetővé teszi az oldal balra és jobbra mozgatását. A Tailwind CSS segédprogram-osztályokat biztosít, amelyek lehetővé teszik a weboldalak függőleges és vízszintes görgetését.
Ez a cikk példákat mutat be:
- Hogyan lehet engedélyezni a függőleges görgetést hátszélben?
- Hogyan lehet engedélyezni a vízszintes görgetést hátszélben?
Hogyan lehet engedélyezni a függőleges görgetést hátszélben?
A függőleges görgetés engedélyezéséhez Tailwindben használja a „ overflow-y-scroll ” segédprogram osztály a kívánt elemmel a HTML programban. Lehetővé teszi a függőleges görgetést, és mindig megjeleníti a görgetősávokat, hacsak a felhasználó nem tiltotta le a „mindig látható” görgetősávokat a rendszerbeállításaiban.
Szintaxis
< elem osztály = 'overflow-y-scroll...' > ... elem >
Példa: Függőleges görgetés engedélyezése
Ebben a példában létrehozunk egy rugalmas tárolót néhány rugalmas elemmel egy oszlopban, és alkalmazzuk a „ overflow-y-scroll ” haszna:
< test >
< div osztály = 'flex flex-col overflow-y-scroll bg-purple-700 p-4 mx-14 mt-5 h-36' >
< div osztály = 'bg-yellow-400 p-2 m-2' > 1 div >
< div osztály = 'bg-yellow-400 p-2 m-2' > 2 div >
< div osztály = 'bg-yellow-400 p-2 m-2' > 3 div >
< div osztály = 'bg-yellow-400 p-2 m-2' > 4 div >
< div osztály = 'bg-yellow-400 p-2 m-2' > 5 div >
< div osztály = 'bg-yellow-400 p-2 m-2' > 6 div >
div >
test >
Itt, a szülőben:
- ' Flex ” osztály a gyermekelemek méretének beállítására szolgál a rendelkezésre álló hely alapján, rugalmas elrendezés létrehozásával.
- ' flex-col ” osztály a tároló rugalmas irányát oszlopra állítja.
- ' overflow-y-scroll ” osztály lehetővé teszi a függőleges görgetést.
- ' bg-lila-700 ” osztály a lila színt állítja be a tároló hátterére.
- ' p-4 ” osztály 4 egységnyi párnázást tartalmaz a konténer minden oldalán.
- ' mx-14 ” osztály a 14 egységnyi margót alkalmazza a konténer x tengelyére.
- ' mt-5 ” osztály az 5 egységnyi margót a tartály tetejére alkalmazza.
- ' h-36 ” osztály a konténer magasságát 36 egységre állítja be.
A
- ' bg-sárga-400 ” osztály a rácselemek hátterét sárgára állítja.
- ' p-2 ” osztály 3 egységnyi kitöltést ad a flex elemeken belüli tartalomhoz.
- ' m-2 ” osztály beállítja a 2 egység margót a flex elemekre.
Kimenet
A fenti kimeneten látható, hogy a függőleges görgetés sikeresen engedélyezve lett.
Hogyan lehet engedélyezni a vízszintes görgetést hátszélben?
A vízszintes görgetés engedélyezéséhez Tailwindben használja a „ overflow-x-scroll ” segédprogram osztály az adott elemmel a HTML programban. Lehetővé teszi a vízszintes görgetést, és mindig megjeleníti a görgetősávokat, hacsak a felhasználó nem tiltotta le a „mindig látható” görgetősávokat a rendszerbeállításaiban.
Szintaxis
< elem osztály = 'overflow-x-scroll...' > ... elem >
Példa: Vízszintes görgetés engedélyezése
Ebben a példában létrehozunk egy rugalmas tárolót néhány rugalmas elemmel egymás után, és alkalmazzuk a „ overflow-x-scroll ” haszna:
< test >< div osztály = 'flex flex-row overflow-x-scroll space-x-24 bg-purple-700 p-4 mx-14 mt-5 h-36' >
< div osztály = 'bg-yellow-400 p-2 m-2' > 1 div >
< div osztály = 'bg-yellow-400 p-2 m-2' > 2 div >
< div osztály = 'bg-yellow-400 p-2 m-2' > 3 div >
< div osztály = 'bg-yellow-400 p-2 m-2' > 4 div >
< div osztály = 'bg-yellow-400 p-2 m-2' > 5 div >
< div osztály = 'bg-yellow-400 p-2 m-2' > 6 div >
div >
test >
Itt a szülőben
Kimenet
A fenti kimenet azt jelzi, hogy a vízszintes görgetés sikeresen engedélyezve lett.
Következtetés
A függőleges és vízszintes görgetés engedélyezéséhez Tailwindben, a „ overflow-y-scroll ” és „ overflow-x-scroll ” használati osztályokat rendre használjuk. Ezek a segédprogramok a HTML program kívánt elemeire vonatkoznak, így lehetővé teszik a függőleges és vízszintes görgetést, és mindig megjelenítik a görgetősávokat. Ez a cikk bemutatta a függőleges és vízszintes görgetés engedélyezésének módszerét a Tailwindben.