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

})();