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.
Do you often find it difficult to explain complex workflows? Or maybe you want to present your business processes in a more engaging and easy-to-understand way? If so, then flowchart is the answer! A flowchart, or flowchart, is a visual representation of the steps in a process. With a clear flowchart, communication becomes more effective, […]
Content Writer
Welcome to my career journey notes! This blog will take you through the steps that have shaped me up to this point. I’ll be sharing the ups and downs, valuable lessons, and key moments that color my professional journey. Let’s start from the beginning… This all started back when I was in middle school. At […]
Content Writer
In the hustle and bustle of modern life, we often get caught up in busy routines, especially when it comes to studying. Academic demands, work, and other responsibilities can make us forget how important it is to take breaks. But getting enough rest is the key to keeping our physical and mental health in check […]
Content Writer