✨ 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;
}

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