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. Toch kan dat wel eens problemen geven als het gaat om de verticale scrollbalk.

Tegenwoordig maak je een website vaak 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.

Je kunt dit aanpassen door in het stijlbestand van je site de volgende CSS-code op te nemen:

Open het CSS bestand dat de stijlen voor je site bevat.

  • Je vind hier een selector met de naam body. Is er geen selector met die naam dan kun je deze toevoegen.
  • Vul de bestaande code aan of voeg deze toe:
  • body { overflow-y: scroll; }
  • De verticale scrollbalk zal nu steeds zichtbaar zijn.