Onze klanten beoordelen ons met
4,9 / 5 sterren

Custom scrollbar maken

Herken je dit? Je hebt een mooie website gebouwd en bent klaar om hem aan de wereld te laten zien. Maar je zit met één probleem, namelijk: De lelijke grijze scrollbar van je internetbrowser!

Deze dus! 😉


In deze korte tutorial laat ik je zien hoe je zelf een custom scrollbar maakt, niet omdat het iets uitmaakt voor je bezoekers of iets dergelijks maar gewoon om te laten zien dat je meer kunt aanpassen dan vaak op het eerste gezicht lijkt.

Eigenlijk is het heel simpel, kopieer onderstaande code naar de style.css van je child theme, en pas de waardes aan naar wens. Enige CSS kennis is hiervoor wel vereist.

::-webkit-scrollbar {
      width: 15px;
} /* this targets the default scrollbar (compulsory) */

::-webkit-scrollbar-track {
      background-color: #b46868;
} /* the new scrollbar will have a flat appearance with the set background color */

::-webkit-scrollbar-thumb {
      background-color: rgba(0, 0, 0, 0.2);
} /* this will style the thumb, ignoring the track */

::-webkit-scrollbar-button {
      background-color: #7c2929;
} /* optionally, you can style the top and the bottom buttons (left and right for horizontal bars) */

::-webkit-scrollbar-corner {
      background-color: black;
} /* if both the vertical and the horizontal bars appear, then perhaps the right bottom corner also needs to be styled */

Dat is alles! Maar nu heb je wel een mooie custom scrollbar!

HULP NODIG?

lEG JE PROBLEEM VOOR

Heb je een probleem met je website en kom je er zelf niet aan uit?

Wij kijken graag met je mee en geven altijd een eerlijk en transparant advies. 

Wij maken een passende offerte voor je alvorens de werkzaamheden worden verricht.

Gespecialiseerd in WordPress webdesign, hosting en onderhoud.


Dankzij ruime kennis en ervaring ben je gegarandeerd van de mooiste website en de beste hosting.