Een HTML-schuifblok is een vak dat schuifbalken aan de rechterkant en onderkant toevoegt wanneer de inhoud van de doos groter is dan de kaderafmetingen. Met andere woorden, als u een doos heeft die ongeveer 50 woorden kan bevatten, en u een tekst van 200 woorden hebt, zal een HTML-schuifbalk de schuifbalken omhoog zetten om u de extra 150 woorden te laten zien. In standaard HTML die de extra tekst gewoon buiten de box zou duwen.
Het maken van HTML-scrollen is vrij eenvoudig. U hoeft alleen de breedte en hoogte in te stellen van het element dat u wilt verplaatsen en vervolgens de eigenschap CSS overloop gebruiken om in te stellen hoe u wilt scrollen.
Wat te doen met extra tekst?
Als je meer tekst hebt dan in de ruimte op je lay-out past, heb je een paar opties:
- Herschrijf de tekst zodat deze korter is en past.
- Laat de tekst over de grenzen heen stromen en hoop dat de lay-out kan buigen om deze te ondersteunen.
- Snijd de tekst af waar deze overloopt.
- Voeg schuifbalken toe (meestal verticaal voor tekst) zodat de spatie schuift om de extra tekst weer te geven.
De beste optie is meestal de laatste optie: maak een scrollend tekstvak. Dan kan extra tekst nog steeds worden gelezen, maar uw ontwerp is niet aangetast.
HTML en CSS hiervoor zouden zijn:
De
overloop: automatisch;
vertelt de browser om schuifbalken toe te voegen als deze nodig zijn om te voorkomen dat de tekst de grenzen van de div overschrijdt. Maar om dit te laten werken, hebt u ook de eigenschappen voor de eigenschappen in breedte en hoogte nodig die op de div zijn ingesteld, zodat er grenzen zijn om over te lopen.
Je kunt ook de tekst afsnijden door de overloop te wijzigen: auto; overlopen: verborgen ;. Als u de overloopeigenschap weglaat, loopt de tekst over de grenzen van de div.
U kunt schuifbalken toevoegen aan meer dan alleen tekst
Als u een grote afbeelding hebt die u in een kleinere ruimte wilt weergeven, kunt u er schuifbalken omheen toevoegen op dezelfde manier als met tekst.
In dit voorbeeld bevindt de afbeelding van 400 x 509 zich in een alinea van 300 x 300 pixels. Lange tabellen met informatie kunnen erg moeilijk heel snel worden gelezen, maar door ze in een div van een beperkte grootte te plaatsen en vervolgens de eigenschap overflow toe te voegen, kunt u tabellen genereren met veel gegevens die geen extreme ruimte op uw pagina in beslag nemen. . De eenvoudigste manier is net als bij afbeeldingen en tekst, voeg gewoon een div toe rond de tabel, stel de breedte en hoogte in van die div en voeg de eigenschap overflow toe: Een ding dat gebeurt wanneer u dit doet, is dat een horizontale schuifbalk meestal wordt weergegeven omdat de browser aanneemt dat het chroom van de schuifbalken de tabel overlapt. Er zijn veel manieren om dit te verhelpen door de breedte van de tabel en andere te wijzigen. Maar mijn favoriet is om eenvoudig horizontaal scrollen uit te schakelen met de CSS 3-eigenschap overflow-x . Voeg gewoon toe overflow-x: verborgen; naar de div, en dat zal de horizontale schuifbalk verwijderen. Zorg dat je dit test, want er is mogelijk inhoud die verdwijnt.
Tafels kunnen profiteren van schuifbalken
Naam Telefoon Jennifer 502-5366
