Tämä artikkeli havainnollistaa CSS overflow-y -ominaisuuden käyttöä lukuisilla esimerkeillä.
Kuinka käyttää Overflow-y-omaisuutta CSS:ssä?
CSS' ylivuoto-y ” -ominaisuutta käytetään ohjaamaan sisällön ylivuotoa elementin poikkiakselilla. Se määrittää, leikataanko sisältö vai lisätäänkö vierityspalkki, kun sisältö ylittää säilön korkeuden. Tämän ominaisuuden mahdolliset arvot ovat ' näkyvissä ”, “ piilotettu ”, “ rullaa ”, ja ” auto ”.
Katsotaanpa alla olevista esimerkeistä ylivuoto-y-ominaisuuden parempi esittely:
Esimerkki 1: Näkyvän käyttö ylivuoto-y-ominaisuuden arvona
' näkyvissä ”-arvo sallii sisällön vuotamisen yli säilöstä eikä lisää leikkaus- tai vierityspalkkeja. Käy alla olevassa käytännön koodilohkossa:
>
>
>
Yllä olevan koodilohkon kuvaus:
- Määritä ensin arvo ' vanhempi ' kohtaan ' luokkaa '-määrite ja käytä ' tyyli ”-attribuutti.
- Anna lisäksi arvo ' näkyvissä 'CSS:ään' ylivuoto-y ” omaisuutta. ja aseta se yhtä suureksi kuin ' tyyli ”-attribuuttia, jotta CSS-tyyli toimii.
- Luo seuraavaksi sisäkkäinen ' div ' -elementti ja määritä sille luokka ' lapsisisältö ”. Anna sille myös vääriä tietoja.
Käytä nyt CSS-ominaisuuksia parantaaksesi visualisointia, mikä auttaa ymmärtämään paremmin CSS-ylivuoto-y-ominaisuutta:
.vanhempi {leveys : 200 pikseliä ;
korkeus : 150 pikseliä ;
rajaa : 1px kiinteä musta ;
}
.childContent {
korkeus : 300 pikseliä ;
taustaväri : vaaleansininen ;
}
CSS-ominaisuuksien kuvaus on annettu alla:
- Ensinnäkin ' vanhempi ' luokka on valittu ja arvot ' 200 pikseliä ”, “ 150 pikseliä ”, ja ” 1px kiinteä musta ' on määritetty CSS:lle' leveys ”, “ korkeus ”, ja ” rajaa ”-ominaisuuksia.
- Valitse seuraavaksi ' lapsisisältö ' luokka ja aseta arvot ' 300 pikseliä ' ja ' vaaleansininen 'CSS:ään' korkeus ' ja ' taustaväri ”-ominaisuuksia. Tämä luokka on laajennettu ' vanhempi 'luokka, jota CSS hallitsee' ylivuoto ” omaisuutta.
Koodinpätkien kokoamisen jälkeen verkkosivu näyttää tältä:
Tilannekuva näyttää, että ylivuotosisältö on nyt näkyvissä, eikä vierityspalkkia tai leikkausta ole lisätty oletuksena.
Esimerkki 2: Hiddenin käyttäminen Overflow-y-omaisuuden arvona
' ylivuoto-y ' omaisuus, jonka arvo on ' piilotettu ” piilottaa kaiken sisällön, joka liikkuu pääsäiliön ulkopuolelle. Tämä ominaisuus ei lisää vierityspalkkeja, vaan se leikkasi ylivuodon olevan sisällön:
>
>
Yllä oleva koodinpätkä sisältää:
- Ensin sama koodi lisätään uudelleen sisäisen div-elementin sisälle sijoitetun valesisällön lisäyksellä.
- Muuta seuraavaksi ' ylivuoto-y 'omaisuus' piilotettu ' kohtaan ' '-tunniste, jonka luokka on ' vanhempi ”.
Uudelleen piirtämisen jälkeen verkkosivu näyttää tältä:
Tilannekuva näyttää, että ylivuodon sisältö on leikattu.
Esimerkki 3: Scrollin käyttäminen Overflow-y-ominaisuuden arvona
arvon asettaminen ylivuoto-y ' omaisuutta ' rullaa ' avulla loppukäyttäjä voi selata
sisältöä, joka ylittää sen. Käydään alla olevassa koodilohkossa:
= 'vanhempi' tyyli = 'overflow-y: scroll;' >
= 'lasten sisältö' > Tämä on vain huijausta sisältö käytetään ylivuoto-y-ominaisuuden esittelyyn, kun se on asetettu näkyväksi. Tämä on vain huijausta sisältö käytetään ylivuoto-y-ominaisuuden esittelyyn, kun se on asetettu näkyväksi.
>
>Yllä olevassa koodilohkossa:
- Ensinnäkin sama HTML-rakenne on lisätty ' ' -tunniste.
- Muuta seuraavaksi ' ylivuoto-y ' omaisuutta ' rullaa ”. Tämä mahdollistaa ' vanhempi ” div ottaaksesi käyttöön vieritystehosteen hallitsemaan ylivuoteltua sisältöä.
Yllä olevan koodilohkon kääntämisen jälkeen verkkosivu näyttää tältä:
Yllä oleva gid havainnollistaa, että vieritystehoste on ollut käytettävissä ylivuotetun sisällön hallitsemiseksi.
Esimerkki 4: Automaattinen käyttö ylivuoto-y-ominaisuuden arvona
Tässä esimerkissä käyttäjät voivat lisätä vierityspalkin vain, jos sisältö ei mahdu säilöön. Jos sisältö ei vuoda liikaa, vierityspalkkia ei lisätä. Se on mahdollista antamalla arvo ' auto 'CSS:ään' ylivuoto-y ”omaisuus:
= 'vanhempi' tyyli = 'overflow-y: auto;' >
= 'lasten sisältö' > Tämä on vain huijausta sisältö käytetään ylivuoto-y-ominaisuuden esittelyyn, kun se on asetettu näkyväksi. Tämä on vain huijausta sisältö käytetään ylivuoto-y-ominaisuuden esittelyyn, kun se on asetettu näkyväksi.
>
>Yllä olevassa koodilohkossa:
- Lisää ensin sama HTML-tiedosto ' ' -tunniste.
- Päivitä seuraavaksi ' ylivuoto-y 'omaisuus' auto ”. Se mahdollistaa vieritystehosteen sisällön pystysuuntaiseen pituuteen nähden.
Kokoamisprosessin päätyttyä verkkosivu toimii seuraavasti:
Yllä oleva gif näyttää ylivuotoominaisuuden, joka on ottanut vierityspalkin käyttöön sisällön pituuden mukaan.
Johtopäätös
CSS' ylivuoto-y ” -ominaisuutta käytetään ohjaamaan ylivuoteltua sisältöä elementin poikkiakselilla. Ylivuoto-y-ominaisuus ohjaa sisältöä ylivuoto-y-ominaisuuksille annetun tietyn arvon mukaan. ' visuaalinen '-arvo näyttää ylivuotetun sisällön, ' piilotettu ' arvo piilottaa ylivuotosisällön ja ' rullaa ”-arvo lisää vierityspalkin sisällön hallitsemiseksi. Ja jos arvo on ' auto ” vierityspalkki lisää tai poistaa sisällön pituuden mukaan.