Skip to content

Instantly share code, notes, and snippets.

@IceCreamYou
Last active March 6, 2024 01:00
Show Gist options
  • Star 45 You must be signed in to star a gist
  • Fork 13 You must be signed in to fork a gist
  • Save IceCreamYou/cd517596e5847a88e2bb0a091da43fb4 to your computer and use it in GitHub Desktop.
Save IceCreamYou/cd517596e5847a88e2bb0a091da43fb4 to your computer and use it in GitHub Desktop.
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

Thanks, updated line 30.

@princeofnubia
Copy link

Is it still working?

@IceCreamYou
Copy link
Author

Yes it still works...

@princeofnubia
Copy link

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

@IceCreamYou
Copy link
Author

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