Custom scrollbar maken

scrollbar

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!

Deze post delen:

Share on facebook
Share on linkedin
Share on twitter
Share on email

Ontdek nog meer handleidingen:

Hulp nodig met je website?

Laat het ons weten, wij helpen je graag.

closeup