Har du lagt märke till att vissa webbplatser har snygga, anpassade rullningslister som matchar deras varumärkesfärger perfekt? 🤩
Vi har också lagt märke till den här funktionen. Och många av våra användare har frågat oss hur man skapar dessa iögonfallande anpassade scrollbars på sina egna WordPress-sidor.
Den goda nyheten? Att anpassa din WordPress-scrollbar är mycket enklare än du kanske tror. Oavsett om du vill matcha dina varumärkesfärger, förbättra navigeringen eller lägga till en professionell touch på din webbplats, så visar vi dig exakt hur du gör det. Ingen kodningsupplevelse krävs!

Vad du bör veta innan du lägger till en anpassad rullningslist 💡
Så du är intresserad av att anpassa din WordPress Scrollbar. Men innan du sätter igång finns det några viktiga saker du bör veta för att se till att du fattar rätt beslut för din WordPress-webbplats.
För det första, även om anpassade rullningslister kan se fantastiska ut, visar inte alla webbläsare dem på samma sätt. Moderna webbläsare som Chrome stöder dem väl, men andra kan visa begränsad anpassning eller ingen alls – särskilt på mobila enheter.
Nyckeln är att börja subtilt. Vi rekommenderar alltid att du börjar med mindre justeringar som matchar ditt varumärkes färgschema snarare än att skapa flashiga mönster som kan distrahera från ditt innehåll. Kom ihåg: din scrollbar ska förbättra användarupplevelsen, inte stjäla showen.
Rätt utfört kan detta designelement för WordPress ge din webbplats en extra professionell touch. Se bara till att testa dina ändringar i olika webbläsare för att säkerställa en konsekvent upplevelse för alla dina besökare.
Nu när du förstår vad du kan förvänta dig, låt oss titta på hur du lägger till en anpassad rullningslist på din WordPress-webbplats. Använd bara snabblänkarna nedan för att hoppa till den metod du vill använda:
🔎 Vill du lägga till anpassade rullningslister till specifika element som innehållsrutor eller sidofält? Kolla in vår guide om hur du lägger till anpassade rullningslister till alla element i WordPress.
Alternativ 1: Använd Advanced Scrollbar Plugin (gratis + enkelt)
Det enklaste sättet att anpassa rullningslisten i WordPress är genom att använda Advanced Scrollbar. Med detta kostnadsfria plugin kan du ändra scrollbarens bredd, färg, scrollhastighet och mycket mer utan att behöva skriva en enda rad kod.
Det första du behöver göra är att installera och aktivera pluginet Advanced Scrollbar. För mer detaljer, se vår Step-by-Step guide om hur du installerar ett WordPress plugin.
När du är aktiverad, heada till Settings ” Advanced Scrollbar Settings.

Här kan du ändra scrollbarens design, t.ex. färgschema och bakgrundsfärg.
I Följer image har vi skapat en blå scrollbar.

Du kan också ändra musens rullningssteg genom att skriva in en new siffra i fältet ”Mouse Scroll Step”.
En lägre siffra gör att din site rullar långsammare, och en högre siffra gör att den rullar snabbare.

Du kan också välja om du vill dölja rullningslisten automatiskt så att den bara visas när besökaren rullar.
Detta kan vara användbart om du har skapat en mer färgstark rullningslist och är orolig för att den ska distrahera från resten av ditt content.

Som standard visas rullningslisten på höger sida av webbläsarfönstret. Du kan dock flytta den till vänster sida med hjälp av inställningarna för ”Rail Align” om du föredrar det.
När du är nöjd med rullningslistans konfiguration ska du komma ihåg att klicka på ”Save Changes” för att spara dina inställningar.
Du kan nu besöka din WordPress-blogg för att se den anpassade rullningslisten i aktion.
Alternativ 2: Skapa CSS Scrollbar (Avancerat)
Om du vill göra mer avancerade ändringar i din scrollbar är ett annat alternativ att använda CSS.
Genom att skapa en anpassad rullningslist med CSS kan du anpassa varje del av elementet, men det fungerar bara på stationära webbläsare som använder WebKit. Det innebär att dina ändringar inte kommer att visas i alla webbläsare, inklusive mobila webbläsare.
För att anpassa din rullningslist med CSS, gå till Appearance ” Customize.
Obs/observera: Om du använder ett block theme kommer det här alternativet inte att vara available för you. I så fall kan du öppna customize genom att skriva in https://example.com/wp-admin/customize.php URL. Tänk på att ersätta example.com med din egen sites domain name.
För mer information, kolla in vår guide om hur du åtgärdar saknad temaanpassare i WordPress-admin.

I WordPress customize klickar du på ”Additional CSS”.
Nu kan du add to din kod i den lilla editor som visas.

Här är ett exempel på kod som ändrar hur rullningslisten ser ut:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | ::-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 ; } |
Du kan add to vilken kod du vill. För mer information om CSS, vänligen se vår kompletta guide om hur du lägger till customize CSS i ditt WordPress theme.
När du är nöjd med din kod klickar du bara på knappen ”Publicera”. Du kan nu besöka din WordPress-webbplats i en WebKit-webbläsare för att se dina ändringar i aktion.

Bonus Tips: Lägg till en Scroll to Top-effekt i WordPress
Förutom att skapa en custom scrollbar kanske du också vill add to en scroll-to-top-effekt på din WordPress site. Detta kan vara till stor hjälp om du har längre blogginlägg och vill ge användarna ett snabbt sätt att komma tillbaka till högst upp.
För att add to den här funktionen måste du installera och aktivera WPFront Scroll Top plugin. Detaljerade instruktioner finns i vår tutorial om hur du installerar ett plugin för WordPress.
Vid aktivering, besök Settings ” Scroll Top page från WordPress dashboard och kontrollera ”Aktiverad” boxen för att aktivera rulla till högst upp effekten.
Efter det kan du editera förskjutningen av rullningen, knappens storlek, opacitet, uttoningslängd, rullningslängd och mer härifrån.

När du är klar, glöm inte att clicka på knappen ”Save Changes” för att store dina inställningar.
Du har nu lyckats lägga till en scroll-to-top-effekt på din webbplats. För mer detaljerade instruktioner, se vår handledning om hur du lägger till en smidig scroll to top-effekt i WordPress.

Vi hoppas att den här artikeln hjälpte dig att lära dig hur du lägger till en anpassad scrollbar i WordPress. Du kanske också vill se våra expertval för de bästa dra-och-släpp-sidbyggarna för WordPress och vår ultimata guide om hur man redigerar en WordPress-webbplats.
If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.
Marcos
Thank you! The CSS is plug&play.
WPBeginner Support
Glad to hear our guide was helpful!
Admin
Luqman Essam
THank You! It helped me!
WPBeginner Support
Glad our guide was helpful!
Admin
Victor
Is there any plugin for WP that will display sequential art as in a comic strip where installments can be posted on a weekly basis?
WPBeginner Support
You may want to take a look at our guide on managing a post series: https://www.wpbeginner.com/plugins/how-to-effeciently-manage-post-series-in-wordpress/
Admin
ash
it not working very fine on some websites, depends to the themes that the website uses, it might even hide the scroll bar and make the website loading time more than normal, i suggest using a CSS code it’s easy to use and customizable as well … i give a sample ans you guys just modify it as your own
===
::-webkit-scrollbar {
width: 14px;
background-color: silver;
}
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
border-radius: 10px;
background-color: silver;
}
::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
background-color: #0099cc;
}
Vas
Excellent…The cleanest solution.
It would be nice to post the code for Firefox…if there is such option.
Thanks for sharing.
WPBeginner Staff
There might be someway to override it through a custom css. Please contact plugin’s support.
Karen
What a fun plugin. I just installed it. Is there any way to control the opacity – of the color of the scrollbar when you aren’t hovered over it? Thanks for this post!
WPBeginner Staff
Thank you for notifying us. Fixed it.
Vernon Trent
please correct your link to the plugin.
there is a missing S in the url ”pluginS”
Guest
Hi the link in the post seems broken may affect your site rank.
Please place correct link for ”Dewdrop Custom Scrollbar” plugin.