Force visible scrollbar in Firefox on Mac OS X

css firefox gecko
Boschman picture Boschman · Aug 19, 2013 · Viewed 47.4k times · Source

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

Claudio Holanda picture Claudio Holanda · Aug 19, 2013

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.

Related questions

What is the correct "-moz-appearance" value to hide dropdown arrow of a <select> element

I'm trying to style the dropdown arrow of a <select> element with CSS only , it works perfectly in Chrome/Safari: select { -webkit-appearance: button; -webkit-border-radius: 2px; -webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1); -webkit-padding-end: 20px; -webkit-padding-start: 2px; -webkit-user-select: none; background-image: url(…

Read More
How do I scale an SVG background-image without honoring aspect ratio in Firefox?

I've got a CSS background-image set on an element of fluid height and width. It's an SVG, and the intended behavior is for it to stretch in whatever directions necessary to cover the entirety of the element's area. In Chrome, …

Read More
Only Firefox ignoring 100% height with display: table-cell

I'm trying to vertically center an element by setting its parent to display: table and then the element to display: table-cell; vertical-align: middle;. I'm also setting the height of the element to 34% and its parent to 100% so it fills the …

Read More