Customize website's scrollbar like Mac OS. Not supports in Firefox and IE.

Author

Test this code on CodePen
CodePen

It's awesome!

Thanks.

Scrollbar is not getting auto hidden after scroll. Is there any way we can achieve that as well ?

Scrollbar is not getting auto hidden after scroll. Is there any way we can achieve that as well ?

Hello @agarwal00s you can do this with css, it would look something like this:

.scrollbar::-webkit-scrollbar-thumb {
    background-color: rgba(0,0,0,0);
    border-radius:16px;
    border:5px solid #fff;
}

.scrollbar:hover::-webkit-scrollbar-thumb {
  background-color: #a0a0a5;
}

.scrollbar::-webkit-scrollbar-thumb:hover {
    background-color:#a0a0a5;
    border:4px solid #f4f4f4
}

don't forget about 'height' in ::-webkit-scrollbar, otherwise horizontal scroll will have another width

This solution is great for a controlled background. If you have an image or multiple components with different backgrounds the scrollbar track does not overlay content as it works in Mac OS, and have white (or whatever you defined) background. Also, if the content does not overlap the container and overflow is set to auto, when the scrollbar appears it changes the width of the content. overflow: scroll does not resolve this issue also, because in this case we have static track which could not overlay background of the container as well.

@seleckis yes agree with you the problem is with the overlay!

put "overflow: overlay" in body and set the background colors for the scrollbar and scrollbar track to rgba(0,0,0,0) and you'll get a transparent background

Lol somehow it looks better than the native MacOS scroll bar.