Den här artikeln visar användningen av CSS overflow-y-egenskapen med många exempel.
Hur man använder Overflow-y Property i CSS?
CSS ' overflow-y ”-egenskapen används för att kontrollera överflödet av innehåll längs tväraxeln inom ett element. Den anger om innehållet ska klippas eller läggas till en rullningslist när innehållet överstiger behållarens höjd. De möjliga värdena för den här egenskapen är ' synlig ”, “ dold ”, “ skrolla ', och ' bil ”.
Låt oss besöka nedanstående exempel för en bättre demonstration av overflow-y-egenskapen:
Exempel 1: Använda Synlig som ett värde för Overflow-y-egenskap
den ' synlig ”-värdet låter innehållet flöda över från behållaren och lägger inte till några urklipp eller rullningslister. Besök nedanstående praktiska kodblock:
>
>
>
Beskrivningen av ovanstående kodblock:
- Tilldela först värdet ' förälder ' till ' klass '-attributet och använda ' stil ' attribut.
- Ange dessutom värdet av ' synlig ' till CSS ' overflow-y ' fast egendom. Och sätt det lika med ' stil ”-attribut för att få CSS-stylingen att fungera.
- Skapa sedan en kapslad ' div ' element och tilldela det en klass av ' barninnehåll ”. Ange också dummy-data till den.
Använd nu CSS-egenskaperna för att förbättra visualiseringen som hjälper till att bättre förstå CSS-overflow-y-egenskapen:
.förälder {bredd : 200 pixlar ;
höjd : 150 pixlar ;
gräns : 1 px fast svart ;
}
.childContent {
höjd : 300 pixlar ;
bakgrundsfärg : ljusblå ;
}
Beskrivningen av CSS-egenskaper ges nedan:
- Först, ' förälder '-klassen är vald och värdena för ' 200 pixlar ”, “ 150 pixlar ', och ' 1px helt svart ' är tilldelade CSS ' bredd ”, “ höjd ', och ' gräns ” fastigheter respektive.
- Välj sedan ' barninnehåll ' klass och ställ in värdena för ' 300 pixlar ' och ' ljusblå ' till CSS ' höjd ' och ' bakgrundsfärg ” fastigheter respektive. Denna klass utökas till ' förälder ' klass som kontrolleras av CSS ' svämma över ' fast egendom.
Efter sammanställningen av kodavsnitt ser webbsidan ut så här:
Ögonblicksbilden visar att överflödesinnehållet nu har varit synligt och rullningslisten eller klippet läggs inte till som standard.
Exempel 2: Använda Hidden som ett värde för Overflow-y-egenskap
den ' overflow-y ' egendom med värdet ' dold ” döljer allt innehåll som flyttas utanför sin överordnade behållare. Den här egenskapen lägger inte till rullningslister istället för att klippa av det översvämmade innehållet:
>
>
Ovanstående kodavsnitt innehåller:
- Först infogas samma kod igen med en ökning av dummy-innehållet placerat inuti det inre div-elementet.
- Ändra sedan värdet på ' overflow-y ' egendom till ' dold ' till ' '-taggen har en klass av ' förälder ”.
Efter omrendering ser webbsidan ut så här:
Ögonblicksbilden visar att överflödesinnehållet har klippts ut.
Exempel 3: Använda Scroll som ett värde för Overflow-y-egenskap
Ställa in värdet för ' overflow-y ' egendom till ' skrolla ” låter slutanvändaren bläddra igenom
innehåll som svämmar över det. Låt oss besöka kodblocket nedan:
= 'förälder' stil = 'overflow-y: scroll;' >
= 'barninnehåll' > Det här är bara dummy innehåll används för demonstration av overflow-y-egenskapen när den är inställd på synlig. Det här är bara dummy innehåll används för demonstration av overflow-y-egenskapen när den är inställd på synlig.
>
>I ovanstående kodblock:
- Först har samma HTML-struktur infogats i '
'-tagg. - Ändra sedan värdet på ' overflow-y ' egendom till ' skrolla ”. Detta gör att ' förälder ” div för att aktivera rullningseffekten för att kontrollera det överflödade innehållet.
Efter kompileringen av ovanstående kodblock ser webbsidan ut så här:
Ovanstående gid illustrerar att rullningseffekten har varit tillgänglig för att kontrollera det överflödade innehållet.
Exempel 4: Använda Auto som ett värde för Overflow-y-egenskap
I det här exemplet kan användare bara lägga till en rullningslist om innehållet inte får plats i behållaren. Om innehållet inte svämmar över kommer rullningslisten inte att läggas till. Det är möjligt genom att tillhandahålla värdet av ' bil ' till CSS ' overflow-y ' fast egendom:
= 'förälder' stil = 'overflow-y: auto;' >
= 'barninnehåll' > Det här är bara dummy innehåll används för demonstration av overflow-y-egenskapen när den är inställd på synlig. Det här är bara dummy innehåll används för demonstration av overflow-y-egenskapen när den är inställd på synlig.
>
>I ovanstående kodblock:
- Först, infoga samma HTML-fil i '
'-tagg. - Uppdatera sedan värdet på ' overflow-y ' egendom till ' bil ”. Det möjliggör rullningseffekten i förhållande till innehållets vertikala längd.
Efter slutet av kompileringsprocessen fungerar webbsidan så här:
Ovanstående gif visar överflödesegenskapen som har aktiverat rullningslisten enligt innehållets längd.
Slutsats
CSS ' overflow-y ”-egenskapen används för att kontrollera det överflödade innehållet längs tväraxeln inom ett element. Overflow-y-egenskapen styr innehållet enligt det specifika värdet som tillhandahålls för overflow-y-egenskaperna. den ' visuell '-värdet visar det överflödade innehållet, ' dold '-värdet döljer överflödesinnehållet, och ' skrolla ” värde lägger till en rullningslist för att styra innehållet. Och om värdet är ' bil ” rullningslisten lägger till eller tar bort beroende på innehållets längd.
- Först har samma HTML-struktur infogats i '