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-scrollbars-visible.css

.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);
}

force-scrollbars-visible.js

(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');
    }
});

})();

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

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!

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

Thanks a lot for this piece of code 🍺

Thanks, updated line 30.

Is it still working?

Yes it still works...

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

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

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