Customize Scrollbar in Any Website Using CSS | Custom Scrollbar in WordPress: Customizing the scrollbar of your website can add a unique touch to your site’s design, making it stand out and enhancing the overall user experience. This gives you the flexibility to achieve all sorts of designs with javascript and css, whether that be styling it according to your website’s colour scheme or giving it a completely new look. In this article, you will learn how to custom scrollbars for any website and especially WordPress websites.
Why Customize the Scrollbar?
In web design, the scrollbar is something that comes into play on a very regular basis and so often it can be overlooked. Some of the things you will be able to do after customizing the scrollbar are:
- Improved Aesthetics: Color Code the Scrollbar to your site’s pallet.
- Poor Usability: Scrollbar not visible or easy to use
- Personalize: Make your site different from the others
Why Customize the Scrollbar?
The scrollbar is often overlooked in web design, but it can be an integral part of the user experience. By customizing the scrollbar, you can:
- Enhance Visual Appeal: Match the scrollbar to your website’s color palette.
- Improve Usability: Make the scrollbar more visible or accessible for users.
- Add Personalization: Create a unique look that sets your site apart from others.
Adding Custom Scrollbar in WordPress
Follow the steps below to include this custom scrollbar in your WordPress site.
- Login to your WordPress Dashboard
- Go to Appearance > Customize.
- Click on Additional CSS.
- Copy and paste this custom scrollbar CSS code into your editor.
- Finally, hit Publish to save the changes.
Although a tiny part of it, customizing the website scrollbar aids in defining your UX and gives an appealing sight to behold. It takes a few lines of CSS to style scrollbar which fits your website customization. This post has you covered whether the scrollbar customization of any WordPress website or site in general.
Don’t worry, I also made a video tutorial if you feel more comfortable following along with that. Follow along and see these steps in action via the tutorial here.
*::-webkit-scrollbar-track
{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.1);
background-color: #F5F5F5;
border-radius: 10px;margin-left:-10px!important;
}
*::-webkit-scrollbar
{
width: 10px;
margin-left:-10px;
background-color: #F5F5F5!important;
}
*::-webkit-scrollbar-thumb
{
border-radius: 10px;
background-color: #FFF;
background-image: linear-gradient(to right, #4CB8C4 0%, #3CD3AD 51%, #4CB8C4 100%);
}
