Custom scrollbar toevoegen in WordPress

Custom scrollbar toevoegen in WordPress

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.

custom scrollbar
Voorbeeld van custom scrollbars

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.

 

Wil jij meer leren over Wordpress?

In de kennisbank vertellen we je alles over de belangrijkste onderwerpen

  • Snel en gemakkelijk contact met een WordPress expert
  • Ontvang als eerste nieuwtjes & leuke acties
  • Overleg met andere WordPress fans

Je WordPress vraag of probleem razendsnel opgelost met de hulp van een echte WordPress developer!

Join de grootste WordPress community van Nederland & stel je vraag via ons WordPress ticketsysteem.

Blijf op de hoogte van het laatste WordPress nieuws.

Schrijf je in voor onze wekelijkse nieuwsbrief.