Force visible scrollbar in Firefox on Mac OS X

Question

Firefox 24 introduced Lion scrollbar support. This will show scrollbars in Lion style on Mac OS X. See: https://wiki.mozilla.org/Lion_Scrollbars/Triage

This causes a problem for me: a scrollbar on a div is now hidden by default. Sometimes I want to force a visible scrollbar.

For WebKit there is a nice solution (mentioned at https://davidwalsh.name/osx-overflow):

::-webkit-scrollbar {
   -webkit-appearance: none;
   width: 7px;
}

::-webkit-scrollbar-thumb {
   border-radius: 4px;
   background-color: rgba(0,0,0,.5);
   -webkit-box-shadow: 0 0 1px rgba(255,255,255,.5);
}

Does anybody know how I can force a visible scrollbar in Firefox 24 (and up) on Mac OS X?

Are there any drop-in javascript scrollbars that match webkit scrollbars?

Answer 1

As user thirtydot explained in another question, there is no way to customize scrollbars in Firefox as its possible in Chrome.

Also, there is no way to actually "force" Firefox render the old-style scrollbar since the default scrollbar used in the system is predefined by the OS itself (note that you can modify which scrollbar you want in System Preferences).

In other words, until Firefox supports native custom scrollbars, it is only possible with JavaScript plugins such as jScrollPane and similar.

Answer 2

Here's a solution but you have to use Javascript. Basically it runs a loop that forces the browser to show the scrollbars.

Use this CSS to make sure your div is set to show scrollbars:

.mydiv{ overflow-y:auto; }

Then attach this script to your page (this requires JQuery).

<script type="text/JavaScript">
var sc;
jQuery(document).ready(function(){
    //constantly update the scroll position:
    sc=setInterval(scrollDown,200);

    //optional:stop the updating if it gets a click
    jQuery('.mydiv').mousedown(function(e){
        clearInterval(sc);            
    });
});
function scrollDown(){
    //find every div with class "mydiv" and apply the fix
    for(i=0;i<=jQuery('.mydiv').length;i++){
        try{
            var g=jQuery('.mydiv')[i];
            g.scrollTop+=1;
            g.scrollTop-=1;
        } catch(e){
            //eliminates errors when no scroll is needed
        }
    }
}
</script>

Answer 3

How about overflow: -moz-scrollbars-vertical?