Force Visible Scrollbar in Firefox on MAC Os X

Force visible scrollbar in Firefox on Mac OS X

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.

CSS - Overflow: Scroll; - Always show vertical scroll bar?

Just ran into this problem myself. OSx Lion hides scrollbars while not in use to make it seem more "slick", but at the same time the issue you addressed comes up: people sometimes cannot see whether a div has a scroll feature or not.

The fix: In your css include -

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

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

/* always show scrollbars */
::-webkit-scrollbar {  -webkit-appearance: none;  width: 7px;}
::-webkit-scrollbar-thumb {  border-radius: 4px;  background-color: rgba(0, 0, 0, .5);  box-shadow: 0 0 1px rgba(255, 255, 255, .5);}

/* css for demo */
#container {  height: 4em;  /* shorter than the child */  overflow-y: scroll;  /* clip height to 4em and scroll to show the rest */}
#child {  height: 12em;  /* taller than the parent to force scrolling */}

/* === ignore stuff below, it's just to help with the visual. === */
#container {  background-color: #ffc;}
#child {  margin: 30px;  background-color: #eee;  text-align: center;}

<div id="container">  <div id="child">Example</div></div>

Preventing scroll bars from being hidden for MacOS trackpad users in WebKit/Blink

The appearance of the scroll bars can be controlled with WebKit's -webkit-scrollbar pseudo-elements ^[blog]. You can disable the default appearance and behaviour by setting -webkit-appearance ^[docs] to none.

Because you're removing the default style, you'll also need to specify the style yourself or the scroll bar will never show up. The following CSS recreates the appearance of the hiding scroll bars:

Example (jsfiddle)

CSS

.frame::-webkit-scrollbar {
    -webkit-appearance: none;
}

.frame::-webkit-scrollbar:vertical {
    width: 11px;
}

.frame::-webkit-scrollbar:horizontal {
    height: 11px;
}

.frame::-webkit-scrollbar-thumb {
    border-radius: 8px;
    border: 2px solid white; /* should match background, can't be transparent */
    background-color: rgba(0, 0, 0, .5);
}

.frame::-webkit-scrollbar-track { 
    background-color: #fff; 
    border-radius: 8px; 
} 

WebKit (Chrome) Screenshot

Hidden scrollbars in Firefox (allows scrolling but just no scrollbar)

You must wrap your scrollable div in another div with overflow:hidden that hides the scrollbar.

See http://jsfiddle.net/qqPcb/ for an example.

BTW: The same technique is used by a nice little jQuery plugin called jScrollPane

Mac's not reliably displaying horizontal scroll bars.

Mac OSX has a system setting to turn on and off constantly showing scroll bars. It can be found in the System Settings -> General -> "Display Scrollbars".

If "display scrollbars" is turned off, they'll only show up in the browser window while you're actually scrolling. That way you won't see them in overflowing containers unless you're scrolling.

Hide scrollbar when not scrolling (Mac like behaviour)

Hopefully this helps. A bit of debouncing and css for scrollbar. If you want to change the style / animation of changing width, there are better resources for that. Good luck!

function debounce(func, timeout = 300){
  let timer;
  return (...args) => {
    clearTimeout(timer);
    timer = setTimeout(() => { func.apply(this, args); }, timeout);
  };
}

window.addEventListener("mousewheel", e => {
  document.querySelector("div").classList.remove("hidden");
});

window.addEventListener("mousewheel", debounce(e => {
  document.querySelector("div").classList.add("hidden");
}));

div {
  background: gray;
  overflow: auto;
  height: 300px;
  width: 100%;
}

div > div {
  background: lighblue;
  height: 800px;
}

/* width */
.shown::-webkit-scrollbar {
  width: 10px;
}

/* width */
.hidden::-webkit-scrollbar {
  width: 0px;
}

/* Track */
::-webkit-scrollbar-track {
  background: black;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: white;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: lightblue;
}

<div class="shown">
  <div></div>
</div>

---

Related Topics