Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Mac OS X hides scrollbars by default. This is annoying for UI design because it means users might not realize that certain areas are scrollable. This public domain Gist forces the scrollbar to always be visible with native behavior in Webkit-based browsers (Chrome and Opera) on Macs.
.force-show-scrollbars ::-webkit-scrollbar-track:vertical {
border-left: 1px solid #E7E7E7;
box-shadow: 1px 0 1px 0 #F6F6F6 inset, -1px 0 1px 0 #F6F6F6 inset;
}
.force-show-scrollbars ::-webkit-scrollbar-track:horizontal {
border-top: 1px solid #E7E7E7;
box-shadow: 0 1px 1px 0 #F6F6F6 inset, 0 -1px 1px 0 #F6F6F6 inset;
}
.force-show-scrollbars ::-webkit-scrollbar {
-webkit-appearance: none;
background-color: #FAFAFA;
width: 16px;
}
.force-show-scrollbars ::-webkit-scrollbar-thumb {
background-clip: padding-box;
background-color: #C1C1C1;
border-color: transparent;
border-radius: 9px 8px 8px 9px;
border-style: solid;
border-width: 3px 3px 3px 4px; /* Workaround because margins aren't supported */
box-shadow: 0 0 1px rgba(255, 255, 255, 0.5);
}
/* Unfortunately scrollbars can't use CSS transitions. Also, it's not possible
to highlight the thumb when the scrollbar track is hovered without some
JavaScript acrobatics; https://jsfiddle.net/QcqBM/6/ is a start, but you
also have to check whether the element has a scrollbar and if so how wide
it is. */
.force-show-scrollbars ::-webkit-scrollbar-thumb:hover {
background-color: rgba(0, 0, 0, 0.5);
}
(function() {
// Returns whether scrollbars show up on scrollable elements.
// This is false on Macs when the "General > Show scroll bars" setting is
// not set to "Always" (the default is "When scrolling"). The approach
// taken here is to create an element that will scroll and then compare
// its outer width (including scrollbars) to its inner width (excluding
// scrollbars).
function areScrollbarsVisible() {
var scrollableElem = document.createElement('div'),
innerElem = document.createElement('div');
scrollableElem.style.width = '30px';
scrollableElem.style.height = '30px';
scrollableElem.style.overflow = 'scroll';
scrollableElem.style.borderWidth = '0';
innerElem.style.width = '30px';
innerElem.style.height = '60px';
scrollableElem.appendChild(innerElem);
document.body.appendChild(scrollableElem); // Elements only have width if they're in the layout
var diff = scrollableElem.offsetWidth - scrollableElem.clientWidth;
document.body.removeChild(scrollableElem);
return diff > 0;
}
window.addEventListener('load', function() {
// Show scrollbars if they're hidden.
if (!areScrollbarsVisible()) {
document.body.classList.add('force-show-scrollbars');
}
}
})();
@Te7a-Houdini

This comment has been minimized.

Copy link

Te7a-Houdini commented May 22, 2018

thanks for the code , BTW there's a missing ) after } in line 30

@pjobson

This comment has been minimized.

Copy link

pjobson commented Jan 8, 2019

Client: The scroll bar is not there!!!
Me: If it is mac it is invisible, just scroll down.
Client: The scroll bar is not there!!!

Thanks IceCreamYou!

@NaLLiFFuNT

This comment has been minimized.

Copy link

NaLLiFFuNT commented Mar 1, 2019

Thank you it's exactly what i was looking for!

@martinpesout

This comment has been minimized.

Copy link

martinpesout commented Oct 22, 2019

Thanks a lot for this piece of code 🍺

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.