Pysty- ja vaakavieritys ovat tapoja navigoida verkkosivulla hiirellä, kosketuslevyllä tai sormella. Pystyvieritystä käytetään, kun elementin sisältö ylittää säiliön korkeuden. Vaakasuuntaista vieritystä käytetään, kun elementin sisältö ylittää säilön leveyden. Pystyvierityksen avulla käyttäjät voivat siirtää verkkosivua ylös ja alas, kun taas vaakasuuntaisen vierityksen avulla sivua voi liikkua vasemmalle ja oikealle. Tailwind CSS tarjoaa hyödyllisyysluokkia, jotka mahdollistavat pysty- ja vaakavierityksen verkkosivuilla.
Tämä artikkeli on esimerkki:
- Kuinka ottaa pystysuuntainen vieritys käyttöön Tailwindissä?
- Kuinka ottaa vaakasuuntainen vieritys käyttöön myötätuulessa?
Kuinka ottaa pystysuuntainen vieritys käyttöön Tailwindissä?
Ota pystysuora vieritys käyttöön Tailwindissä käyttämällä ' overflow-y-scroll ” apuluokka halutulla elementillä HTML-ohjelmassa. Se mahdollistaa pystysuuntaisen vierityksen ja näyttää aina vierityspalkit, ellei käyttäjä ole poistanut käytöstä 'aina näkyviä' vierityspalkkeja järjestelmäasetuksistaan.
Syntaksi
< elementti luokkaa = 'overflow-y-scroll...' > ... elementti >
Esimerkki: Pystyvierityksen ottaminen käyttöön
Tässä esimerkissä luomme joustavan säiliön, jossa on joitain joustavia kohteita sarakkeessa ja käytämme ' overflow-y-scroll 'hyöty sille:
< kehon >
< div luokkaa = 'flex flex-col overflow-y-scroll bg-purple-700 p-4 mx-14 mt-5 h-36' >
< div luokkaa = 'bg-yellow-400 p-2 m-2' > 1 div >
< div luokkaa = 'bg-yellow-400 p-2 m-2' > 2 div >
< div luokkaa = 'bg-yellow-400 p-2 m-2' > 3 div >
< div luokkaa = 'bg-yellow-400 p-2 m-2' > 4 div >
< div luokkaa = 'bg-yellow-400 p-2 m-2' > 5 div >
< div luokkaa = 'bg-yellow-400 p-2 m-2' > 6 div >
div >
kehon >
Tässä ylätasolla
- ' flex ” -luokkaa käytetään alielementin kokojen säätämiseen käytettävissä olevan tilan perusteella luomalla joustava asettelu.
- ' flex-col ” luokka asettaa säilön flex-suunnan sarakkeeksi.
- ' overflow-y-scroll ” luokka mahdollistaa pystyvierityksen.
- ' bg-violetti-700 ”-luokka asettaa violetin värin säilön taustalle.
- ' p-4 ”-luokka asettaa 4 yksikköä pehmustetta säiliön joka puolelle.
- ' mx-14 ” luokka soveltaa 14 marginaaliyksikköä säiliön x-akselilla.
- ' mt-5 ” luokka soveltaa 5 yksikköä marginaalia säiliön yläosaan.
- ' h-36 ” luokka asettaa kontin korkeudeksi 36 yksikköä.
Lapsessa
- ' bg-keltainen-400 ” luokka asettaa ruudukon kohteiden taustan keltaiseksi.
- ' p-2 ” luokka lisää 3 yksikköä täyttöä flex-kohteiden sisältöön.
- ' m-2 ” luokka asettaa 2 yksikön marginaalin flex-osille.
Lähtö
Yllä olevassa tulosteessa voidaan nähdä, että pystysuuntainen vieritys on otettu käyttöön onnistuneesti.
Kuinka ottaa vaakasuuntainen vieritys käyttöön myötätuulessa?
Ota vaakasuuntainen vieritys käyttöön Tailwindissä käyttämällä ' overflow-x-scroll ” apuluokka tietyllä elementillä HTML-ohjelmassa. Se mahdollistaa vaakasuuntaisen vierityksen ja näyttää aina vierityspalkit, ellei käyttäjä ole poistanut käytöstä 'aina näkyviä' vierityspalkkeja järjestelmäasetuksistaan.
Syntaksi
< elementti luokkaa = 'overflow-x-scroll...' > ... elementti >
Esimerkki: Vaakavierityksen ottaminen käyttöön
Tässä esimerkissä luomme joustavan säiliön, jossa on joitain joustavia kohteita peräkkäin ja käytämme ' overflow-x-scroll 'hyöty sille:
< kehon >< div luokkaa = 'flex flex-row overflow-x-scroll space-x-24 bg-purple-700 p-4 mx-14 mt-5 h-36' >
< div luokkaa = 'bg-yellow-400 p-2 m-2' > 1 div >
< div luokkaa = 'bg-yellow-400 p-2 m-2' > 2 div >
< div luokkaa = 'bg-yellow-400 p-2 m-2' > 3 div >
< div luokkaa = 'bg-yellow-400 p-2 m-2' > 4 div >
< div luokkaa = 'bg-yellow-400 p-2 m-2' > 5 div >
< div luokkaa = 'bg-yellow-400 p-2 m-2' > 6 div >
div >
kehon >
Tässä yläosassa
Lähtö
Yllä oleva tulos osoittaa, että vaakasuuntainen vieritys on otettu käyttöön onnistuneesti.
Johtopäätös
Jos haluat ottaa pysty- ja vaakavierityksen käyttöön Tailwindissä, ' overflow-y-scroll ' ja ' overflow-x-scroll ” hyödyllisyysluokkia käytetään vastaavasti. Näitä apuohjelmia sovelletaan haluttuihin elementteihin HTML-ohjelmassa pysty- ja vaakavierityksen mahdollistamiseksi ja vierityspalkin näyttämiseksi aina. Tämä artikkeli on osoittanut menetelmän pysty- ja vaakasuuntaisen vierityksen mahdollistamiseksi Tailwindissä.