Navpično in vodoravno drsenje sta načina za krmarjenje po spletni strani z uporabo miške, sledilne ploščice ali prsta. Navpično drsenje se uporablja, ko vsebina elementa presega višino vsebnika. Medtem ko se vodoravno drsenje uporablja, ko vsebina znotraj elementa presega širino vsebnika. Navpično drsenje omogoča uporabnikom premikanje spletne strani gor in dol, medtem ko vodoravno drsenje omogoča premikanje strani levo in desno. Tailwind CSS ponuja razrede pripomočkov za omogočanje navpičnega in vodoravnega drsenja po spletnih straneh.
Ta članek bo ponazoril:
Kako omogočiti navpično drsenje v zadnjem vetru?
Če želite omogočiti navpično drsenje v Tailwindu, uporabite » overflow-y-scroll ” uporabnega razreda z želenim elementom v programu HTML. Omogoča navpično drsenje in vedno prikazuje drsne trakove, razen če je uporabnik v svojih sistemskih nastavitvah onemogočil 'vedno vidne' drsne trakove.
Sintaksa
< element razred = 'overflow-y-scroll ...' > ... element >
Primer: Omogočanje navpičnega drsenja
V tem primeru bomo ustvarili flex vsebnik z nekaj flex elementi v stolpcu in uporabili ' overflow-y-scroll ” pripomoček za to:
< telo >
< div razred = 'flex flex-col overflow-y-scroll bg-purple-700 p-4 mx-14 mt-5 h-36' >
< div razred = 'bg-rumena-400 p-2 m-2' > 1 div >
< div razred = 'bg-rumena-400 p-2 m-2' > 2 div >
< div razred = 'bg-rumena-400 p-2 m-2' > 3 div >
< div razred = 'bg-rumena-400 p-2 m-2' > 4 div >
< div razred = 'bg-rumena-400 p-2 m-2' > 5 div >
< div razred = 'bg-rumena-400 p-2 m-2' > 6 div >
div >
telo >
Tukaj, v nadrejenem
- “ flex ” se uporablja za prilagajanje velikosti podrejenega elementa na podlagi razpoložljivega prostora z ustvarjanjem prilagodljive postavitve.
- “ flex-col ” nastavi smer upogibanja vsebnika na stolpec.
- “ overflow-y-scroll ” razred omogoča navpično drsenje.
- “ bg-vijolična-700 ” nastavi vijolično barvo za ozadje vsebnika.
- “ p-4 ” razred nastavi 4 enote oblazinjenja na vseh straneh posode.
- “ mx-14 ” uporablja 14 enot marže na osi x vsebnika.
- “ mt-5 ” uporabi 5 enot roba na vrhu vsebnika.
- “ h-36 ” nastavi višino posode na 36 enot.
V otroku
- “ bg-rumena-400 ” nastavi ozadje elementov mreže na rumeno.
- “ p-2 ” doda 3 enote oblazinjenja vsebini znotraj elementov flex.
- “ m-2 ” razred nastavi rob 2 enot za postavke flex.
Izhod
V zgornjem izhodu je razvidno, da je bilo navpično drsenje uspešno omogočeno.
Kako omogočiti vodoravno drsenje v zadnjem vetru?
Če želite omogočiti vodoravno drsenje v Tailwindu, uporabite » overflow-x-scroll ” razred pripomočkov s posebnim elementom v programu HTML. Omogoča vodoravno drsenje in vedno prikazuje drsne trakove, razen če je uporabnik v svojih sistemskih nastavitvah onemogočil 'vedno vidne' drsne trakove.
Sintaksa
< element razred = 'overflow-x-scroll ...' > ... element >
Primer: Omogočanje vodoravnega drsenja
V tem primeru bomo ustvarili flex vsebnik z nekaj flex elementi v vrsti in uporabili ' overflow-x-scroll ” pripomoček za to:
< telo >< div razred = 'flex flex-row overflow-x-scroll space-x-24 bg-purple-700 p-4 mx-14 mt-5 h-36' >
< div razred = 'bg-rumena-400 p-2 m-2' > 1 div >
< div razred = 'bg-rumena-400 p-2 m-2' > 2 div >
< div razred = 'bg-rumena-400 p-2 m-2' > 3 div >
< div razred = 'bg-rumena-400 p-2 m-2' > 4 div >
< div razred = 'bg-rumena-400 p-2 m-2' > 5 div >
< div razred = 'bg-rumena-400 p-2 m-2' > 6 div >
div >
telo >
Tukaj v nadrejenem
Izhod
Zgornji izhod pomeni, da je bilo vodoravno drsenje uspešno omogočeno.
Zaključek
Če želite omogočiti navpično in vodoravno drsenje v Tailwindu, se » overflow-y-scroll « in » overflow-x-scroll ” se uporabljajo razredi uporabnosti. Ti pripomočki se uporabijo za želene elemente v programu HTML, da omogočijo navpično in vodoravno drsenje ter vedno prikažejo drsne trakove. Ta članek je prikazal metodo za omogočanje navpičnega in vodoravnega drsenja v Tailwindu.