Bored with the browser’s default scrollbar? Want your website to look more unique and attract visitors? Well, you’re in the right place! In this article, we’ll explore how to modify your website’s scrollbar with just a touch of CSS. It’s really easy, let’s get straight to it!
Scrollbars are essential for navigation, especially on long web pages. However, their appearance is often plain and less eye-catching. However, with a little CSS creativity, you can create scrollbars that are not only functional but also part of your overall website design. Cool, right?
CSS has some special pseudo-elements that we can use to dress up scrollbars. Take note of them:
::-webkit-scrollbar. This is the main pseudo-element that allows us to target the entire scrollbar area. (Note: This is specific to WebKit-based browsers like Chrome, Safari, and newer versions of Edge).::-webkit-scrollbar-thumb. The part that we drag to scroll. This is the “thumb” of the scrollbar.::-webkit-scrollbar-track. The background area where the thumb moves. This is the “track” of the scrollbar.::-webkit-scrollbar-corner. The area in the bottom (or right, depending on scroll direction) corner where the horizontal and vertical scrollbars meet.::-webkit-resizer. (For resizable elements) A small area in the corner of an element that allows the user to resize it.Well, now let’s look at an example of its application to make it clearer:
/* For the entire scrollbar */
::-webkit-scrollbar {
width: 10px; /* Scrollbar width */
}
/* For track (background) scrollbar */
::-webkit-scrollbar-track {
background: #f1f1f1; /* Track background color */
}
/* For thumb (the part that is pulled) scrollbar */
::-webkit-scrollbar-thumb {
background: #888; /* Thumb color */
border-radius: 5px; /* Makes the corner of the thumb blunt */
}
/* Hover effect on thumb */
::-webkit-scrollbar-thumb:hover {
background: #555; /* Thumb color when hovered */
}In the code above, we set the scrollbar width to 10 pixels, the track background color to light gray, and the thumb color to dark gray with rounded corners. We also give it a hover effect to make it more interactive. Simple, right?
Browser Compatibility as mentioned earlier, the -webkit- property is specific to WebKit-based browsers. For other browsers like Firefox, you can use a different CSS property called -moz-appearance: none; and then style the scrollbar element in a more complex way using JavaScript and additional HTML elements. However, for basic modifications, focusing on -webkit- is enough for most users.
Usability: Don’t let your scrollbar modifications make it difficult for users. Make sure the color contrast between the thumb and the track is clear, and the thumb size is not too small. Functionality is still number one! Keep it Simple: Sometimes, overly complicated modifications look unprofessional. Choose a design that fits your website style and is still pleasing to the eye.