Dit artikel demonstreert het gebruik van de eigenschap CSS overflow-y met tal van voorbeelden.
Hoe gebruik je Overflow-y-eigenschap in CSS?
De CSS “ overloop-y ” eigenschap wordt gebruikt om het overlopen van de inhoud langs de dwarsas binnen een element te regelen. Het geeft aan of de inhoud moet worden geknipt of dat er een schuifbalk moet worden toegevoegd wanneer de inhoud de hoogte van de container overschrijdt. De mogelijke waarden voor deze eigenschap zijn ' zichtbaar ”, “ verborgen ”, “ rol ', En ' auto ”.
Laten we de onderstaande voorbeelden bezoeken voor een betere demonstratie van de eigenschap overflow-y:
Voorbeeld 1: Visible gebruiken als waarde voor de eigenschap Overflow-y
De ' zichtbaar ” waarde zorgt ervoor dat de inhoud uit de container kan stromen en voegt geen clipping of schuifbalken toe. Bezoek het onderstaande praktische codeblok:
>
>
>
De beschrijving van het bovenstaande codeblok:
- Wijs eerst een waarde toe van ' ouder ' naar de ' klas ' attribuut en gebruik de ' stijl ” attribuut.
- Geef daarnaast de waarde op van ' zichtbaar ” naar de CSS “ overloop-y ' eigendom. En stel het gelijk aan de ' stijl ” attribuut om de CSS-styling te laten werken.
- Maak vervolgens een geneste ' div ” element en wijs het een klasse toe van “ kindInhoud ”. Geef er ook dummygegevens aan.
Gebruik nu de CSS-eigenschappen om de visualisatie te verbeteren, wat helpt bij een beter begrip van de CSS-overflow-y-eigenschap:
.ouder {breedte : 200px ;
hoogte : 150px ;
grens : 1px stevig zwart ;
}
.childInhoud {
hoogte : 300px ;
Achtergrond kleur : lichtblauw ;
}
De beschrijving van CSS-eigenschappen wordt hieronder gegeven:
- Eerst de ' ouder ” klasse is geselecteerd en de waarden van “ 200px ”, “ 150px ', En ' 1px effen zwart ” zijn toegewezen aan de CSS “ breedte ”, “ hoogte ', En ' grens ” eigenschappen, respectievelijk.
- Selecteer vervolgens de ' kindInhoud ” class en stel de waarden in van “ 300px ' En ' lichtblauw ” naar de CSS “ hoogte ' En ' Achtergrond kleur ” eigenschappen, respectievelijk. Deze klasse wordt uitgebreid naar de “ ouder ” klasse die wordt bestuurd door de CSS “ overloop ' eigendom.
Na de compilatie van codefragmenten ziet de webpagina er als volgt uit:
De momentopname geeft aan dat de overloopinhoud nu zichtbaar is en dat de schuifbalk of clipping niet standaard is toegevoegd.
Voorbeeld 2: Verborgen gebruiken als waarde voor de eigenschap Overflow-y
De ' overloop-y ” onroerend goed met een waarde van “ verborgen ” verbergt alle inhoud die buiten de bovenliggende container beweegt. Deze eigenschap voegt geen schuifbalken toe, maar knipt de overlopende inhoud af:
>
>
Het bovenstaande codefragment bevat:
- Eerst wordt dezelfde code opnieuw ingevoegd met een toename van dummy-inhoud in het binnenste div-element.
- Wijzig vervolgens de waarde van de ' overloop-y eigendom aan “ verborgen ' naar de ' ” tag met een klasse van “ ouder ”.
Na opnieuw renderen ziet de webpagina er als volgt uit:
De momentopname geeft aan dat de overloopinhoud is afgekapt.
Voorbeeld 3: Scroll gebruiken als waarde voor de eigenschap Overflow-y
Instellen van de waarde van de “ overloop-y ” eigendom aan de “ rol ” stelt de eindgebruiker in staat om door de
inhoud die het overstroomt. Laten we het onderstaande codeblok bezoeken:
= 'ouder' stijl = 'overloop-y: scroll;' >
= 'kindInhoud' > Dit is gewoon een dwaas inhoud gebruikt voor de demonstratie van de eigenschap overflow-y wanneer deze is ingesteld op zichtbaar. Dit is gewoon een dwaas inhoud gebruikt voor de demonstratie van de eigenschap overflow-y wanneer deze is ingesteld op zichtbaar.
>
>In het bovenstaande codeblok:
- Ten eerste is dezelfde HTML-structuur ingevoegd in de '
' label. - Wijzig vervolgens de waarde van de ' overloop-y ” eigendom aan de “ rol ”. Hierdoor kan de “ ouder ”div om het scroll-effect in te schakelen om de overlopende inhoud te regelen.
Na de compilatie van het bovenstaande codeblok ziet de webpagina er als volgt uit:
De bovenstaande gid illustreert dat het scroll-effect beschikbaar is geweest voor het beheersen van de overlopende inhoud.
Voorbeeld 4: Auto gebruiken als waarde voor de eigenschap Overflow-y
In dit voorbeeld kunnen gebruikers alleen een schuifbalk toevoegen als de inhoud niet in de container past. Als de inhoud niet overloopt, wordt de schuifbalk ook niet toegevoegd. Het is mogelijk door de waarde van ' auto ” naar de CSS “ overloop-y ' eigendom:
= 'ouder' stijl = 'overloop-y: auto;' >
= 'kindInhoud' > Dit is gewoon een dwaas inhoud gebruikt voor de demonstratie van de eigenschap overflow-y wanneer deze is ingesteld op zichtbaar. Dit is gewoon een dwaas inhoud gebruikt voor de demonstratie van de eigenschap overflow-y wanneer deze is ingesteld op zichtbaar.
>
>In het bovenstaande codeblok:
- Voeg eerst hetzelfde HTML-bestand in de '
' label. - Werk vervolgens de waarde bij van de ' overloop-y eigendom aan “ auto ”. Het maakt het scroll-effect mogelijk ten opzichte van de verticale lengte van de inhoud.
Na het einde van het compilatieproces werkt de webpagina als volgt:
De bovenstaande gif toont de overflow-eigenschap die de schuifbalk heeft ingeschakeld op basis van de lengte van de inhoud.
Conclusie
De CSS “ overloop-y ” eigenschap wordt gebruikt om de overlopende inhoud langs de dwarsas binnen een element te regelen. De eigenschap overflow-y bepaalt de inhoud volgens de specifieke waarde die is opgegeven voor de eigenschappen overflow-y. De ' visueel ” waarde geeft de overgelopen inhoud weer, de “ verborgen ” waarde verbergt de overloopinhoud, en de “ rol ” waarde voegt een schuifbalk toe om de inhoud te beheren. En als de waarde ' auto ” de schuifbalk voegt toe of verwijdert volgens de lengte van de inhoud.
- Ten eerste is dezelfde HTML-structuur ingevoegd in de '