49

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?

Boschman
  • 825
  • 1
  • 10
  • 17
  • 2
    Unfortunately, this is currently not possible in FF. See: https://bugzilla.mozilla.org/show_bug.cgi?id=77790 The workaround would be to use javascript scrollbars that reimplement native behavior. Keep in mind that browsers are respecting the [user preferences](http://osxdaily.com/2011/08/03/show-scroll-bars-mac-os-x-lion/) set in OSX and users are already trained to scroll in areas that appear to have overflow. – Kerry Liu Oct 14 '13 at 01:12
  • 3
    One thing to be careful of is to design your page in such a way that it actually does appear to have overflow whenever it does. I see many sites now that use "stacked screens" as a design, where you scroll down and keep seeing different screens or "pages" - but if you don't notice the short scrollbar, and the "fold" happens to be right above the start of the next screen, there is nothing to indicate that more content exists. Take [frontporch.io](http://frontporch.io/) for example (as of 10/14/2013.) – JD Smith Oct 14 '13 at 20:00
  • What is the question here? Do you want to force the visibility of scrollbars? Or do you want to customize the look of the scrollbars? – yunzen Oct 16 '13 at 13:40
  • doesn't the webkit work in firefox – Sudharsun Oct 17 '13 at 16:25

4 Answers4

29

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.

Claudio Holanda
  • 2,455
  • 4
  • 21
  • 25
3

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>
Confidant
  • 356
  • 1
  • 9
  • Unfortunately I can't get your solution to work. No visible scrollbar by default in Firefox on my Mac. I created a jsfiddle with your solution: http://jsfiddle.net/o92gdd9y/ What am I doing wrong? – Boschman Mar 04 '15 at 17:22
  • 2
    It does work, but the script was assuming vertical scroll. Your div is assuming horizontal scroll. So you need to constantly update scrollLeft like so: http://jsfiddle.net/o92gdd9y/2/ (which works, but it's a hack) – Blaise Sep 08 '15 at 09:31
-1

How about overflow: -moz-scrollbars-vertical?

Fernando Camargo
  • 25
  • 1
  • 2
  • 4
    And why would this work over anything else? Generally answering a question with another question is not good form. If you know this works, make it a real answer by explaining how it helps. If you don't know this works, wait until you have enough rep to comment, then comment. – Heretic Monkey Sep 29 '16 at 00:26
-1

The actual answer for this is go to System Preferences - General Tab - and turn 'Show Scroll Bars' to 'Always'.

user16628429
  • 11