De moderne browsers proberen zoveel mogelijk schermruimte te reserveren voor de geopende website. Natuurlijk is dit mooi. Tenslotte draait het toch om de websites die wij maken.
Nu is dat met de verticale scrollbalk een ander verhaal.
In de meeste gevallen maak je een website zo dat deze gecentreerd in het venster opent. Vooral bij breedbeeldschermen heeft dat twee voordelen:
- De layout zoals wij die met bloed, zweet en tranen hebben gemaakt, blijft behouden.
Onze bezoekers hoeven bij het bekijken van de site niet hun hoofd heen en weer te bewegen alsof ze een tenniswedstrijd volgen.
Wat is dan het probleem met de verticale scrollbalk? Deze komt in veel browsers alleen tevoorschijn als de webpagina zo lang is dat er gescrolled moet worden. Bij kortere pagina’s verdwijnt de scrolbalk. Omdat de scrollbalk een breedte heeft van 28 pixels, verandert daarmee dus de schermbreedte!
Even een rekenvoorbeeld:
Stel je hebt een schermbreedte van 1280 pixels zonder scrollbalk.
De site die je hebt gemaakt is 960 pixels breed en staat gecentreerd.
De linkerrand van je site komt in dit voorbeeld op 160 pixels van de linkerrand van je scherm.
(De halve schermbreedte – de halve paginabreedte: 640 px. – 480 px. = 160 px.)
De rechterrand komt nu op 1120 pixels.
(Linkerrand + paginabreedte: 160 px. + 960 px. = 1120 px.)
Is je pagina nu zo lang dat er gescrolled moet worden dan is de uitkomst als volgt:
De schermbreedte met scrollbalk is 1280 pixels – 28 pixels (breedte scrollbalk) = 1252 pixels.
De linkerrand van je site komt in dit voorbeeld op 146 pixels van de linkerrand van je scherm.
(De halve schermbreedte – de halve paginabreedte: 626 px. – 480 px. = 146 px.)
De rechterrand komt nu op 1106 pixels.
(Linkerrand + paginabreedte: 146 px. + 960 px. = 1120 px.)
Het gevolg is dat de pagina als het ware verspringt van positie wanneer je van een korte naar een lange pagina gaat, en andersom. Dat is natuurlijk geen gezicht.
Om dit te voorkomen is de oplossing in Dynamic HTML Editor eenvoudig:
- Open de pagina-eigenschappen van je pagina of je sjabloon door te dubbelklikken op een leeg gedeelte van de pagina.
- Klik op de knop Handmatig. Dit is de onderste knop in het eigenschappenvenster.
- Zet dan een vinkje bij Toon altijd de verticale scrollbar. Probleem opgelost.
Werk je in een site die bijvoorbeeld is opgezet met WordPress of een ander script dan moet je wat aanpassen in het stijlbestand van de site, de CSS.
- Open het CSS bestand dat de stijlen voor je site bevat.
- Je vind hier een Selector met de naam html en/of body.
- Plaats achter één van deze selectors de volgende code:
overflow-y: scroll; (Staat er nog niets achter de selector dan moet de code tussen accolades worden geplaatst: {overflow-y: scroll;}) - Ook nu zal de verticale scrollbalk steeds zichtbaar zijn.
