Custom scrollbar

Default grey scrollbar might look ugly to you and you really want to change it, no need to worry about it I got ya !

You need some 6 - 7 lines of CSS to customize it.

We'll be using CSS pseudo-element ::-webkit-scrollbar to customize it, but before that let me remind you that ::-webkit-scrollbar might be incompatible with some browsers (i.e. firefox and safari on IOS) so you might need to take that into account.

Let's get started .

::-webkit-scrollbar {
    /* display: none; */
    width: 5px; /* width of the scrollbar */
    height: 0px; /* height of the scrollbar */
    background: rgb(160, 198, 255); /* background color of the scrollbar */
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(
        rgb(134, 239, 172),
        rgb(95, 156, 255),
        rgb(165, 76, 249)
    );
}

This is just a simple example of how you can customize the scrollbar, you can customize it more than that using other scrollbar properties like-

• ::-webkit-scrollbar-button — the buttons on the scrollbar (arrows pointing upwards and downwards that scroll one line at a time).
• ::-webkit-scrollbar-track — the track (progress bar) of the scrollbar, where there is a gray bar on top of a white bar.
• ::-webkit-scrollbar-track-piece — the part of the track (progress bar) not covered by the handle.
• ::-webkit-scrollbar-corner — the bottom corner of the scrollbar, where both horizontal and vertical scrollbars meet. This is often the bottom-right corner of the browser window.
• ::-webkit-resizer — the draggable resizing handle that appears at the bottom corner of some elements.

Thank you for being here, drop a like and comment if it did helped you. ❤️