De CSS “ overloop ” eigenschap wordt gebruikt om de overloop van de inhoud voor het geselecteerde HTML-element te regelen. De inhoud kan in één bepaalde richting gestuurd worden met behulp van “ overloop-y ' En ' overloop-x ' eigenschappen. De eigenschap 'overflow' accepteert waarden als ' rol ”, “ zichtbaar ”, “ verborgen ' En ' auto ” en ze verschillen in functionaliteit van elkaar. Deze gids demonstreert echter het verschil tussen overflow:scroll en overflow:auto aan de hand van praktische voorbeelden.
Hoe verschilt overflow:scroll van overflow:auto?
Het belangrijkste verschil tussen ' rol ' En ' auto ” waarden is dat de “ overloop: scrollen ” toont altijd een schuifbalk of het nodig is of niet, wat een visuele afleiding creëert. Aan de andere kant, de “ overloop: auto ” geeft alleen de schuifbalk weer als de inhoud overloopt. Op deze manier kan een schoner en meer gestroomlijnd ontwerp worden gecreëerd dat gemakkelijk de aandacht van de gebruiker trekt.
Voorbeeld 1: overflow:scroll-eigenschap gebruiken
De CSS “ overloop: scrollen ” eigenschap stelt de schuifbalk standaard in om de overlopende inhoud te regelen. Het ziet de overloopinhoud niet en past vervolgens de schuifbalk toe. In plaats daarvan geeft het een horizontale en verticale schuifbalk weer na het compileren van de code, maar de gebruiker kan alleen een schuifbalk aan de zijkant wijzigen en weergeven volgens de vereisten van het ontwerp.
Ga naar de onderstaande code om de eigenschap 'overflow:scroll' te gebruiken:
< div >
< h3 > Voorbeeld voor Overloop: scrollen h3 >
< div klas = 'scrollenBox scrollen' >
< P > Dit is slechts dummy-inhoud die wordt gebruikt voor de demonstratie van het verschil tussen overflow-y property value scroll en auto.
P >
div >
div >
In het bovenstaande codeblok:
- Eerst de wortel ' div ” element wordt gemaakt en maakt gebruik van de geneste “ 'tag erin.
- Wijs vervolgens de klassen toe van ' scrollingBox ' En ' rol ” naar de reeds aangemaakte geneste “
' label.- Geef ten slotte dummygegevens aan de ' ' En ' 'tags in de' div ” elementen.
Pas na het maken van de HTML-structuur de eigenschap CSS-overloop toe:
< stijl >
.scrollBox {
breedte: 300px;
hoogte: 150px;
rand: 1px effen donkergrijs;
}
.rol {
overloop: scrollen;
}
stijl >Beschrijving van de bovenstaande CSS-code:
- Selecteer eerst de ' scrollingBox ' klasse en geef de waarden op van ' 300px ”, “ 150px ' En ' 1px effen donkergrijs ” naar de CSS “ breedte ”, “ hoogte ', En ' grens ' eigenschappen. Deze eigenschappen worden gebruikt voor een beter visualisatieproces.
- Vervolgens de “ rol ” klasse is geselecteerd, en de waarde van “ rol ” wordt doorgegeven aan de CSS “ overloop ' eigendom.
Na het einde van de compilatiefase:
De bovenstaande uitvoer laat zien dat de inhoud niet overloopt, maar dat de schuifbalk is toegevoegd op zowel de X- als de Y-as.
Voorbeeld 2: Overflow:auto Property gebruiken
De eigenschap overflow:auto lijkt op overflow:scroll omdat beide de schuifbalk kunnen weergeven. Het enige verschil is dat de “ overloop: auto ” voegt een schuifbalk toe wanneer de inhoud overloopt en als de inhoud niet overloopt, wordt de schuifbalk niet toegevoegd. Het wordt meestal gebruikt bij het maken van responsief webdesign vanwege de dynamisch veranderende aard ervan.
Bezoek bijvoorbeeld de onderstaande code:
< div klas = 'auto-voorbeeld' >
< h3 > Voorbeeld voor Overloop: auto h3 >
< div klas = 'scrollbox' stijl = 'overloop: automatisch' >
< P > Dit is slechts dummy-inhoud die wordt gebruikt voor de demonstratie van het verschil tussen overflow-y property value scroll en auto.
P >
div >
div >In het bovenstaande codeblok:
- Eerst wordt dezelfde HTML-structuur gebruikt en worden de dummygegevens verstrekt aan de h3 ', En ' P 'elementen zijn gewijzigd.
- Vervolgens de “ stijl ” attribuut wordt gebruikt met de binnenste geneste “ div ” element en stelt de waarde in van “ auto ” naar de CSS “ overloop ' eigendom.
Na de executie, de “ div ”-element ziet er nu als volgt uit:
De bovenstaande snapshot laat zien dat de schuifbalk niet wordt toegevoegd op basis van de lengte van de inhoud.
Nu, alleen voor een beetje meer opheldering over de ' overloop: auto ' eigendom. Probeer een grote hoeveelheid gegevens aan de geneste ' div ”-element. Na het bijwerken van de code ziet de webpagina er als volgt uit:
De uitvoer bevestigt dat de schuifbalk nu is toegevoegd vanwege de aanwezigheid van overloopinhoud.
Conclusie
De ' overloop: scrollen ' En ' overloop: auto ” eigenschappen verschillen in de situatie waarin ze de schuifbalk toevoegen. De 'overflow:scroll' toont altijd een schuifbalk of de inhoud overloopt of niet. Terwijl de 'overflow:auto' alleen een schuifbalk toont wanneer de inhoud van het geselecteerde HTML-element overloopt. De waarde van de CSS “ overloop ”eigenschap is afhankelijk van het specifieke ontwerp en de gebruikerservaringsvereisten. Dit artikel heeft het verschil aangetoond tussen de eigenschappen 'overflow:scroll' en 'overflow:auto'.
- Wijs vervolgens de klassen toe van ' scrollingBox ' En ' rol ” naar de reeds aangemaakte geneste “