Wil je een custom scrollbar toevoegen aan je WordPress website? Er zijn twee manieren waarop je dat kunt doen: met een plugin en met CSS.
Methode #1: Custom scrollbar toevoegen met een plugin
Dit is de makkelijkste methode en omdat je niet met code hoeft te rommelen, geschikt voor de meeste gebruikers. De plugin maakt gebruik van jquery en biedt ook ondersteuning voor touch scrolling. Dat betekent dus dat je je custom scrollbar in principe ook op mobiele browsers werkend zou moeten krijgen.
Als eerste moet je de Advanced Scrollbar plugin installeren en activeren. Vervolgens ga je op het WordPress Dashboard naar Instellingen > Custom Color Scrollbar Settings om de plugin te configureren. Je kunt de kleur van zowel het schuif je als ‘rails’ van de scrollbar aanpassen, evenals de scrollsnelheid van het muiswiel en de uitlijning. Vergeet niet om de wijzigingen op te slaan. Bekijk je website om je nieuwe scrollbar in actie te zien!
Methode #2: Custom scrollbar toevoegen met CSS
Met deze methode gebruik je CSS om de kleuren van je scrollbar aan te passen. Veel mensen vinden dit beter dan jquery, maar hou er wel rekening mee dat deze methode geen effect heeft op mobiele browsers. Het werkt alleen op desktop browsers die gebruik maken van WebKit rendering, zoals Safari, Google Chrome en Opera.
Ga naar Weergave > Thema’s en open de Customizer. Vervolgens voeg je de onderstaande code toe bij Extra CSS:
::-webkit-scrollbar {
-webkit-appearance: none;
}
::-webkit-scrollbar {
width: 10px;
}
::-webkit-scrollbar-track {
background: #ffb400;
border:1px solid #ccc;
}
::-webkit-scrollbar-thumb {
background: #cc00ff;
border:1px solid #eee;
height:100px;
border-radius:5px;
}
::-webkit-scrollbar-thumb:hover {
background: blue;
}
Speel gerust met verschillende kleuren en andere CSS eigenschappen. Ben je tevreden, vergeet dan niet om je wijzigingen op te slaan. Gebruik een van de ondersteunende browsers om te zien hoe je custom scrollbar eruit ziet.
