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');
}
});
})();
@IceCreamYou
Copy link
Author

IceCreamYou commented Dec 23, 2020

Yes it still works...

@princeofnubia
Copy link

princeofnubia commented Dec 23, 2020

I am experiencing this issue on an hybrid app working on an IPad. It doesnt show.

@IceCreamYou
Copy link
Author

IceCreamYou commented Dec 23, 2020

As the description of this gist says, it's for "Webkit-based browsers on Macs."

@justforuse
Copy link

justforuse commented Feb 8, 2021

Some mac always show the scrollbar above the element, so it will not take the content place. and this method not works to them😢

But good way for most mac users

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