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

css firefox scrollbar
Matt picture Matt · Apr 28, 2011 · Viewed 87.2k times · Source

I'd like to create a div that is able to scroll but does not display scrollbars. I have found a solution for Webkit (below) but how can this be done in other browsers?

I'd prefer to avoid using a javascript plugin. Hoping to find a CSS or vendor specific solution.

Webkit Solution

#photoreel::-webkit-scrollbar {
    height: 0;
    width: 0;
}
#photoreel {
    overflow-x: scroll;
    overflow-y: hidden;
}

Answer

user123444555621 picture user123444555621 · Apr 28, 2011

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

Related questions

Custom CSS Scrollbar for Firefox

I want to customize a scrollbar with CSS. I use this WebKit CSS code, which works well for Safari and Chrome: ::-webkit-scrollbar { width: 15px; height: 15px; } ::-webkit-scrollbar-track-piece { background-color: #C2D2E4; } ::-webkit-scrollbar-thumb:vertical { height: 30px; background-color: #0A4C95; } How can …

Read More
Scrollbar color change in Firefox

I want to change the scrollbar color in Firefox. How can I do that?

Read More
Hide scrollbar in firefox

I want to hide a scroll bar in page but I can scroll like it has a scroll bar. so I cant use overflow:hidden because I want that I can scroll like normal but cannot see a scroll bar. …

Read More