Schuifbalken zijn verticale en horizontale balken langs de rechter (bij schrijven van links naar rechts) en onderrand van een venster of een apart gebied binnen een venster, ontworpen om inhoud verticaal of horizontaal te verplaatsen. Webpagina's gebruiken Cascading Style Sheets (CSS)-elementen die zijn ingesloten in HTML om hun uiterlijk en gedrag te bepalen.
instructies:
Stap 1
Gebruik een div-tag als je de schuifbalk niet voor de hele pagina wilt maken, maar alleen voor een beperkt deel ervan. In HTML (HyperText Markup Language) verwijzen "tags" naar individuele opdrachten voor een browser om een bepaald pagina-element weer te geven. In zijn eenvoudigste vorm wordt een div-tag (vaak een "laag" genoemd) als volgt geschreven:
Dit is de tekst in de laag
Hier is de openingstag en de sluitingstag. Alles wat tussen de openings- en sluitingstags wordt geplaatst, bevindt zich in de laag zoals in de container en deze container kan worden gedimensioneerd - breedte en hoogte. Dit wordt gedaan met behulp van een extra parameterstijl ("attribuut"), die aan de openingstag moet worden toegevoegd:
Dit is de tekst in de laag
Stap 2
Neem ook het stijlkenmerk van de div-tag en de regels voor de schuifbalken van de laag op:
Dit is de tekst in de laag
Hier betekent overloop: auto dat de schuifbalken automatisch verschijnen, dat wil zeggen, wanneer de inhoud van de laag niet in de opgegeven afmetingen past. Als auto wordt vervangen door scrollen, zullen deze strepen altijd aanwezig zijn, ongeacht of ze nodig zijn of niet. Een verborgen waarde heeft het tegenovergestelde effect - de scroll zal nooit verschijnen, zelfs als de inhoud van deze container niet zichtbaar is buiten de randen.
Stap 3
Gebruik een vergelijkbare methode om schuifbalken aan de pagina als geheel toe te voegen. Standaard verschijnen ze zoals nodig, maar als er om welke reden dan ook behoefte is aan hun constante aanwezigheid op de pagina, dan moet de bijbehorende stijlregel worden toegevoegd aan de bron-html-code. Zoek de afsluitende tag van de kop van het document in de code van de pagina en schrijf deze stijlinstructies ervoor:
body {overloop: scroll;}
