Skip to content

Instantly share code, notes, and snippets.

@spemer
Last active August 8, 2024 17:02
Show Gist options
  • Save spemer/a0e218bbb45433bd611e68446523a00b to your computer and use it in GitHub Desktop.
Save spemer/a0e218bbb45433bd611e68446523a00b to your computer and use it in GitHub Desktop.
✨ Customize website's scrollbar like Mac OS. Not supports in Firefox and IE.
/* 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;
}
@spemer
Copy link
Author

spemer commented Jan 5, 2018

Test this code on CodePen
CodePen

@jrmarqueshd
Copy link

jrmarqueshd commented Jul 2, 2020

It's awesome!

Thanks.

@agarwal00s
Copy link

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

@jrmarqueshd
Copy link

jrmarqueshd commented Jul 8, 2020

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
}

@airspin
Copy link

airspin commented Nov 6, 2020

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

@seleckis
Copy link

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.

@rwaidaAlmehanni
Copy link

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

@TorutheRedFox
Copy link

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

@greffgreff
Copy link

greffgreff commented Jun 7, 2022

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

@alioshr
Copy link

alioshr commented Aug 16, 2022

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

@matthieuMay
Copy link

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

@zahinz
Copy link

zahinz commented Aug 18, 2022

/* 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!

@zhnoah
Copy link

zhnoah commented Jun 2, 2023

@hc0503
Copy link

hc0503 commented Sep 26, 2023

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment