Denne artikkelen demonstrerer bruken av CSS overflow-y-egenskapen med en rekke eksempler.
Hvordan bruke Overflow-y Property i CSS?
CSS ' overløp-y ”-egenskapen brukes til å kontrollere overflyten av innholdet langs kryssaksen i et element. Den spesifiserer om innholdet skal klippes eller legges til et rullefelt når innholdet overskrider høyden på beholderen. De mulige verdiene for denne egenskapen er ' synlig ', ' skjult ', ' bla ', og ' auto '.
La oss besøke eksemplene nedenfor for en bedre demonstrasjon av overflow-y-egenskapen:
Eksempel 1: Bruk av Synlig som en verdi for Overflow-y-egenskap
« synlig ”-verdien lar innholdet flyte over fra beholderen og legger ikke til noen utklipp eller rullefelt. Besøk den praktiske kodeblokken nedenfor:
>
>
>
Beskrivelsen av kodeblokken ovenfor:
- Først tilordner du verdien ' forelder ' til ' klasse '-attributtet og bruk ' stil ' Egenskap.
- Oppgi i tillegg verdien av ' synlig ' til CSS ' overløp-y ' eiendom. Og sett den lik ' stil ”-attributt for å få CSS-stylingen til å fungere.
- Deretter oppretter du en nestet ' div ' element og tilordne det en klasse av ' barninnhold '. Oppgi også dummy-data til den.
Bruk nå CSS-egenskapene for å forbedre visualiseringen som hjelper til med en bedre forståelse av CSS-overflyt-y-egenskapen:
.forelder {bredde : 200 piksler ;
høyde : 150 piksler ;
grense : 1 px fast svart ;
}
.childContent {
høyde : 300 piksler ;
bakgrunnsfarge : lyse blå ;
}
Beskrivelsen av CSS-egenskaper er gitt nedenfor:
- Først, ' forelder '-klassen er valgt og verdiene til ' 200 piksler ', ' 150 piksler ', og ' 1px solid svart ' er tilordnet CSS ' bredde ', ' høyde ', og ' grense ” eiendommer, henholdsvis.
- Deretter velger du ' barninnhold '-klassen og angi verdiene for ' 300 piksler ' og ' lyse blå ' til CSS ' høyde ' og ' bakgrunnsfarge ” eiendommer, henholdsvis. Denne klassen utvides til ' forelder ' klasse som kontrolleres av CSS ' flyte ' eiendom.
Etter kompileringen av kodebiter, ser nettsiden slik ut:
Øyeblikksbildet viser at overløpsinnholdet nå har vært synlig og rullefeltet eller utklippet er ikke lagt til som standard.
Eksempel 2: Bruk av skjult som en verdi for overflyt-y-egenskap
« overløp-y ' eiendom med verdien ' skjult ' skjuler alt innholdet som beveger seg utenfor den overordnede beholderen. Denne egenskapen legger ikke til rullefelt, i stedet klippet den overfylte innholdet:
>
>
Kodebiten ovenfor inneholder:
- Først settes den samme koden inn igjen med en økning av dummy-innhold plassert inne i det indre div-elementet.
- Deretter endrer du verdien av ' overløp-y ' eiendom til ' skjult ' til ' ' tag som har en klasse på ' forelder '.
Etter gjengivelse ser nettsiden slik ut:
Øyeblikksbildet viser at overløpsinnholdet er klippet.
Eksempel 3: Bruke Scroll som en verdi for Overflow-y Property
Innstilling av verdien for ' overløp-y ' eiendom til ' bla ” lar sluttbrukeren bla gjennom
innhold som flyter over det. La oss besøke kodeblokken nedenfor:
= 'foreldre' stil = 'overflow-y: scroll;' >
= 'barneinnhold' > Dette er bare dum innhold brukes til å demonstrere overflow-y-egenskapen når den er satt til synlig. Dette er bare dum innhold brukes til å demonstrere overflow-y-egenskapen når den er satt til synlig.
>
>I kodeblokken ovenfor:
- Først har den samme HTML-strukturen blitt satt inn i ' ' stikkord.
- Deretter endrer du verdien av ' overløp-y ' eiendom til ' bla '. Dette gjør at ' forelder ” div for å aktivere rulleeffekten for å kontrollere det overfylte innholdet.
Etter kompileringen av kodeblokken ovenfor, ser nettsiden slik ut:
Gid-en ovenfor illustrerer at rulleeffekten har vært tilgjengelig for å kontrollere det overfylte innholdet.
Eksempel 4: Bruk av Auto som en verdi for Overflow-y-egenskap
I dette eksemplet kan brukere bare legge til et rullefelt hvis innholdet ikke passer i beholderen. Dessuten, hvis innholdet ikke renner over, vil ikke rullefeltet bli lagt til. Det er mulig ved å oppgi verdien av ' auto ' til CSS ' overløp-y ' eiendom:
= 'foreldre' stil = 'overflow-y: auto;' >
= 'barneinnhold' > Dette er bare dum innhold brukes til å demonstrere overflow-y-egenskapen når den er satt til synlig. Dette er bare dum innhold brukes til å demonstrere overflow-y-egenskapen når den er satt til synlig.
>
>I kodeblokken ovenfor:
- Først setter du inn den samme HTML-filen i ' ' stikkord.
- Deretter oppdaterer du verdien av ' overløp-y ' eiendom til ' auto '. Den aktiverer rulleeffekten i forhold til den vertikale lengden på innholdet.
Etter slutten av kompileringsprosessen fungerer nettsiden slik:
GIF-en ovenfor viser overflyt-egenskapen som har aktivert rullefeltet i henhold til lengden på innholdet.
Konklusjon
CSS ' overløp-y ”-egenskapen brukes til å kontrollere det overfylte innholdet langs kryssaksen i et element. Overflow-y-egenskapen kontrollerer innholdet i henhold til den spesifikke verdien gitt til overflow-y-egenskapene. « visuell '-verdien viser det overfylte innholdet, ' skjult '-verdi skjuler overløpsinnholdet, og ' bla ” verdi legger til et rullefelt for å kontrollere innholdet. Og hvis verdien er ' auto ” rullefeltet legger til eller fjerner i henhold til lengden på innholdet.