Att förbättra utseendet på din WordPress-webbplats kan avsevärt förbättra användarupplevelsen, och ett ofta förbisett element är rullningslisten.
Genom att anpassa rullningslisten kan du ge din webbplats en unik touch, göra den mer visuellt engagerande och anpassa den till din övergripande designestetik.
På WPBeginner har vi skrivit hundratals artiklar om WordPress-design och har också använt olika anpassningsfunktioner för att öka engagemanget på vår webbplats.
En anpassad rullningslist kan förbättra utseendet på din webbplats och göra navigeringen smidigare och mer intuitiv för besökarna.
I den här artikeln visar vi hur du enkelt kan add to en custom scrollbar i WordPress.
Varför add to en customize rullgardinsmeny i WordPress?
År 2018 draftade WC3 ett förslag som allowade website-ägare att customize hur rullningslisten ser ut med hjälp av CSS.
Idag har många moderna webbläsare stöd för customize scrollbars.
Med detta i åtanke kanske du vill ändra rullningslisten så att den bättre passar webbplatsens färgschema eller varumärke. Många webbplatser använder också en anpassad rullningslist för att fånga besökarens uppmärksamhet, vilket kan öka sidvisningar och minska avvisningsfrekvensen.
Tänk dock på att varje webbläsare hanterar customize rullningslister på olika sätt. Många webbläsare stöder bara delvis customize, medan vissa inte visar din anpassade styling all.
Det betyder att det är viktigt att testa din site med olika webbläsare och devices för att se hur rullningslisten ser ut i så många webbläsare som möjligt.
Med detta sagt, låt oss ta en titt på hur man addar en customize rullningslist i WordPress. Använd bara snabblänkarna under för att hoppa till den metod du vill använda:
Metod 1: Add a Custom Scrollbar in WordPress With a Plugin (Enkelt)
Det enklaste sättet att anpassa rullningslisten ä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 rullningslistans 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.
You can now visit your WordPress website to see the custom scrollbar in action.
Metod 2: Add to Custom Scrollbar Colors i WordPress med hjälp av CSS
Om du vill göra mer avancerade ändringar i din scrollbar är ett annat alternativ att använda CSS.
Med den här metoden kan du customize alla delar av rullningslisten, men den fungerar bara på webbläsare som använder WebKit. Det innebär att yours ä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.
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:
::-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”. Nu kan du besöka din WordPress blogg i en WebKit webbläsare för att se dina ändringar i action.
Bonus: Add to a Scroll to Top Effect 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 customize scrollbar i WordPress. Du kanske också vill se vår guide om hur man skapar en landing page i WordPress eller se våra expertval för de bästa drag and drop page builders.
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.
Syed Balkhi says
Hey WPBeginner readers,
Did you know you can win exciting prizes by commenting on WPBeginner?
Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
You can get more details about the contest from here.
Start sharing your thoughts below to stand a chance to win!
Marcos says
Thank you! The CSS is plug&play.
WPBeginner Support says
Glad to hear our guide was helpful!
Administratör
Luqman Essam says
THank You! It helped me!
WPBeginner Support says
Glad our guide was helpful!
Administratör
Victor says
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 says
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/
Administratör
ash says
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 says
Excellent…The cleanest solution.
It would be nice to post the code for Firefox…if there is such option.
Thanks for sharing.
WPBeginner Staff says
There might be someway to override it through a custom css. Please contact plugin’s support.
Karen says
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 says
Thank you for notifying us. Fixed it.
Vernon Trent says
please correct your link to the plugin.
there is a missing S in the url ”pluginS”
Guest says
Hi the link in the post seems broken may affect your site rank.
Please place correct link for ”Dewdrop Custom Scrollbar” plugin.