CSS ' prelijevanje ” Svojstvo se koristi za kontrolu prelijevanja sadržaja za odabrani HTML element. Sadržaj se može kontrolirati u jednom određenom smjeru uz pomoć “ preljev-y ' i ' preljev-x ' Svojstva. Svojstvo 'overflow' prihvaća vrijednosti poput ' svitak ”, “ vidljivo ”, “ skriven ' i ' auto ” i međusobno se razlikuju po funkcionalnosti. Međutim, ovaj vodič pokazuje razliku između overflow:scroll i overflow:auto koristeći praktične primjere.
Kako se overflow:scroll razlikuje od overflow:auto?
Glavna razlika između ' svitak ' i ' auto ' vrijednosti je da ' overflow:scroll ” uvijek prikazuje traku za pomicanje bez obzira je li potrebna ili ne, što stvara vizualnu smetnju. S druge strane, „ preljev:auto ” prikazuje traku za pomicanje samo kada je sadržaj prekoračen. Na taj način može se stvoriti čišći i moderniji dizajn koji lako privlači pažnju korisnika.
Primjer 1: Korištenje svojstva overflow:scroll
CSS ' overflow:scroll ” Svojstvo postavlja traku za pomicanje prema zadanim postavkama za kontrolu prekoračenog sadržaja. Ne vidi sadržaj prelijevanja, a zatim primjenjuje traku za pomicanje. Umjesto toga, prikazuje vodoravnu i okomitu traku za pomicanje nakon kompilacije koda, ali korisnik može modificirati i prikazati samo bočnu traku za pomicanje prema zahtjevima dizajna.
Posjetite donji kod da biste iskoristili svojstvo 'overflow:scroll':
< div >
< h3 > Primjer za Preljev: pomicanje h3 >
< div razreda = 'scrollBox pomicanje' >
< str > Ovo je samo korišten lažni sadržaj za demonstracija razlike između pomicanja vrijednosti svojstva overflow-y i auto.
str >
div >
div >
U gornjem bloku koda:
- Prvo, korijen ' div ' element je stvoren i koristi ugniježđeni ' ” oznaku u njemu.
- Zatim dodijelite klase ' okvir za pomicanje ' i ' svitak ” na već stvoreni ugniježđeni “
” oznaka.- Na kraju, dostavite lažne podatke ' ' i ' ' oznake unutar ' div ' elementi.
Nakon izrade HTML strukture, primijenite svojstvo CSS overflow:
< stil >
.scrollingBox {
širina: 300px;
visina: 150px;
obrub: 1px puna tamno siva;
}
.svitak {
preljev: svitak;
}
stil >Opis gornjeg CSS koda:
- Prvo odaberite ' okvir za pomicanje ' klase i navedite vrijednosti ' 300 px ”, “ 150 px ' i ' 1px puna tamno siva ' u CSS ' širina ”, “ visina ', i ' granica ' Svojstva. Ova svojstva se koriste za bolji proces vizualizacije.
- Zatim, ' svitak ” klasa je odabrana, a vrijednost „ svitak ' prosljeđuje se CSS-u ' prelijevanje ” vlasništvo.
Nakon završetka faze kompilacije:
Gornji izlaz pokazuje da se sadržaj ne prelijeva, ali je traka za pomicanje dodana i na osi X i na Y.
Primjer 2: Korištenje svojstva overflow:auto
Svojstvo overflow:auto je kao overflow:scroll jer oba mogu prikazati traku za pomicanje. Jedina razlika je u tome što ' preljev:auto ” dodaje traku za pomicanje kada je sadržaj prekoračen, a ako se sadržaj ne prelijeva, traka za pomicanje se ne dodaje. Uglavnom se koristi pri izradi responzivnog web dizajna zbog svoje dinamički promjenjive prirode.
Na primjer, posjetite donji kod:
< div razreda = 'automatski primjer' >
< h3 > Primjer za Preljev: auto h3 >
< div razreda = 'scrollingBox' stil = 'overflow: auto' >
< str > Ovo je samo korišten lažni sadržaj za demonstracija razlike između pomicanja vrijednosti svojstva overflow-y i auto.
str >
div >
div >U gornjem bloku koda:
- Prvo, koristi se ista HTML struktura, a lažni podaci dostavljeni ' h3 ', i ' str ” elementi se mijenjaju.
- Zatim, ' stil ' atribut se koristi s unutarnjim ugniježđenim ' div ' i postavlja vrijednost ' auto ' u CSS ' prelijevanje ” vlasništvo.
Nakon izvršenja, “ div ” element sada izgleda ovako:
Gornja snimka pokazuje da traka za pomicanje nije dodana prema duljini sadržaja.
Sada, samo za malo više razjašnjenja o ' preljev:auto ” vlasništvo. Pokušajte dati veliku količinu podataka u ugniježđeni ' div ” element. Nakon ažuriranja koda, web stranica izgleda ovako:
Izlaz potvrđuje da je traka za pomicanje sada dodana zbog prisutnosti sadržaja prelijevanja.
Zaključak
' overflow:scroll ' i ' preljev:auto ” svojstva se razlikuju u situaciji kada dodaju traku za pomicanje. “Overflow:scroll” uvijek prikazuje traku za pomicanje bilo da je sadržaj prekoračen ili ne. Dok “overflow:auto” prikazuje traku za pomicanje samo kada se sadržaj odabranog HTML elementa prelijeva. Vrijednost CSS-a “ prelijevanje ” svojstvo ovisi o specifičnom dizajnu i zahtjevima korisničkog iskustva. Ovaj članak je pokazao razliku između svojstava 'overflow:scroll' i 'overflow:auto'.
- Zatim dodijelite klase ' okvir za pomicanje ' i ' svitak ” na već stvoreni ugniježđeni “