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

customize-scrollbar.css

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

/* total width */
body::-webkit-scrollbar {
    background-color: #fff;
    width: 16px;
}

/* background of the scrollbar except button or resizer */
body::-webkit-scrollbar-track {
    background-color: #fff;
}

/* scrollbar itself */
body::-webkit-scrollbar-thumb {
    background-color: #babac0;
    border-radius: 16px;
    border: 4px solid #fff;
}

/* set button(top and bottom of the scrollbar) */
body::-webkit-scrollbar-button {
    display:none;
}

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.

Does this solve the fact that the scrollbar on Windows occupies space on the DOM? It looks like the overflow:overlay solves it, but I cannot reproduce as I do not have Windows. =)

And what about the scrollbars inside other elements (not the body)?

Thanks in advance

merged the content of the discussion in one css :

/* Customize website's scrollbar like Mac OS
Not supports in Firefox and IE */
.scrollbar {
  overflow: overlay
}

/* total width */
.scrollbar::-webkit-scrollbar {
  background-color: rgba(0,0,0,0);
  width: 16px;
  height: 16px;
  z-index: 999999;
}

/* background of the scrollbar except button or resizer */
.scrollbar::-webkit-scrollbar-track {
  background-color: rgba(0,0,0,0);
}

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

/* set button(top and bottom of the scrollbar) */
.scrollbar::-webkit-scrollbar-button {
  display:none;
}


/* scrollbar when element is hovered */
.scrollbar:hover::-webkit-scrollbar-thumb {
  background-color: #a0a0a5;
  border:4px solid #fff;
}

/* scrollbar when scrollbar is hovered */
.scrollbar::-webkit-scrollbar-thumb:hover {
    background-color:#a0a0a5;
    border:4px solid #f4f4f4
}

add 'scrollbar' class to the elements that should have the custom scrollbar (@alioshr).

For those wanting to test this on macOS set the scrollbar always visible. If your scrollbar hides when your mouse does not hover the element than it is working

/* Customize website's scrollbar like Mac OS
Not supports in Firefox and IE */
.scrollbar {
overflow: overlay
}

/* total width */
.scrollbar::-webkit-scrollbar {
background-color: rgba(0,0,0,0);
width: 16px;
height: 16px;
z-index: 999999;
}

/* background of the scrollbar except button or resizer */
.scrollbar::-webkit-scrollbar-track {
background-color: rgba(0,0,0,0);
}

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

/* set button(top and bottom of the scrollbar) */
.scrollbar::-webkit-scrollbar-button {
display:none;
}

/* scrollbar when element is hovered */
.scrollbar:hover::-webkit-scrollbar-thumb {
background-color: #a0a0a5;
border:4px solid #fff;
}

/* scrollbar when scrollbar is hovered */
.scrollbar::-webkit-scrollbar-thumb:hover {
background-color:#a0a0a5;
border:4px solid #f4f4f4
}

This works! thanks!

Chrome 114, overflow: overlay is removed.

@zhnoah , you should use scrollbar-gutter: stable instead of overflow: overlay

Perfect, thanks mate!