At some point, I begin to notice the ugly and super orthodox scrollbars of the Chromium-based browsers more than ever. Everyone maybe does, or is it just me?
I guess not!
and ...
then 😂
It breaks our amazing designs so many times, that we sometimes customize it, if it happens to be a side project of ours, otherwise, we just ignore it.
Also, accessibility is another reason to keep it. But it doesn't have to be as ugly 🤢.
In this article, We're going to go through scrollbars and their properties that we can edit/customize. I'm also going to Introduce SleekScroll, which is a Chrome extension that gives you the ability to customize your browser scrollbar look.
Scrollbars
Scrollbars can be styled and customized using CSS properties, although the level of customization varies across different browsers and their versions. Here are some of the properties that can be edited or styled for scrollbars:
- Scrollbar Width and Height:
width
and height
properties to adjust the size of the scrollbar.
2.Scrollbar Colors:
scrollbar-color
or -webkit-scrollbar-color
to set the color of the scrollbar thumb (not widely supported).
3.Scrollbar Track and Thumb:
scrollbar-track-color
or -webkit-scrollbar-track-color
to set the color of the scrollbar track.
scrollbar-thumb-color
or -webkit-scrollbar-thumb-color
to set the color of the scrollbar thumb.
4.Scrollbar Corner:
scrollbar-corner
or -webkit-scrollbar-corner
to set the color of the scrollbar corner (where horizontal and vertical bars meet).
5.Scrollbar Shadow:
scrollbar-shadow-color
or -webkit-scrollbar-shadow-color
to set the color of the scrollbar shadow.
6.Scrollbar Borders:
scrollbar-width
or -webkit-scrollbar-width
to set the width of the scrollbar.
scrollbar-border-color
or -webkit-scrollbar-border-color
to set the color of the scrollbar border.
7.Scrollbar Behavior:
scrollbar-autohide
or -webkit-scrollbar-autohide
to control the auto-hiding behavior of the scrollbar.
8.Scrollbar Pseudo-elements:
::-webkit-scrollbar
pseudo-element to target the entire scrollbar.
::-webkit-scrollbar-thumb
pseudo-element to target the scrollbar thumb.
::-webkit-scrollbar-track
pseudo-element to target the scrollbar track.
Here is an example of a customized scrollbar on devCanvas
The accessibility bros are going to yell at you if you try to get rid of it, or even give you a convincing argument that it is perfect. But for me, it is super-duper ugly.
Till that is fixed, here is 'sleek scroll'.
SleekScroll
Bid farewell to the ugly-looking scrollbar. With a focus on modern aesthetics, SleekScroll empowers you to create a browsing experience that's as elegant as it is functional.
Features
Escape the ugly scrollbars with ease.
Choose from a range of predefined themes or customize your own.
Enjoy a smooth and engaging scrolling experience.
Compatible with all Chromium-based browsers.
Enjoy an experience that suits you better!
Installation
Goto step 4, if you just clone the repository.
Unzip the package.
Open your Chromium-based browser (e.g., Chrome, Brave).
Go to the extension tab (e.g
chrome://extensions/
).Enable "Developer mode".
Click "Load unpacked" and select the unzipped folder.
Contributing
Contributions are welcome! If you'd like to contribute to SleekScroll, follow these steps:
Fork the repository.
Create a new branch.
Make your changes and commit them.
Push your changes to your forked repository.
Create a pull request explaining your changes.
License
This project is licensed under the MIT License.
I might be taking this too far 😅.
Get Started SleekScroll
Top comments (0)