Hiding Scrollbars in Firefox: A Comparison to Webkit

To create a scrollable div without visible scrollbars, Webkit browsers provide a straightforward solution by adjusting the scrollbars' dimensions. However, replicating this functionality in Firefox requires a slightly different approach.

In Firefox, the desired effect can be achieved by wrapping the scrollable div within an additional div and applying the overflow:hidden property to the outer div. This prevents the scrollbars from being displayed.

#outer-div {
  overflow: hidden;
}

#scrollable-div {
  overflow-x: scroll;
  overflow-y: hidden;
}

This CSS code, as demonstrated in the provided JSFiddle example (http://jsfiddle.net/qqPcb/), allows for scrolling without the distraction of visible scrollbars.

It is worth noting that this technique is employed by the popular jQuery plugin, jScrollPane, providing a convenient and cross-browser solution for hiding scrollbars when desired.