CODEWITHSUNDEEP
cssfirefoxscrollbar
Matt
Matt

Reputation: 22901

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

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;
}

Upvotes: 48

Views: 94678

Answers (5)

RandomCode
RandomCode

Reputation: 423

For (pre-Chromium) Edge:
-ms-overflow-style: none;

For Firefox:
scrollbar-width: none;

Upvotes: 1

Cris
Cris

Reputation: 2943

scrollbar-width:none

Applied to the body or the element with scroll bar.

Overflow:hidden

also disables the scrolling function (makes content not scrollable)

Upvotes: 0

Ondra
Ondra

Reputation: 1081

2019 solution

Since Firefox 64 there is a perfectly simple solution for this (working only in Firefox and Firefox mobile)

scrollbar-width: none;

Check the docs

For the comers from the post marked as duplicate, there is also MS Edge solution:

-ms-overflow-style: -ms-autohiding-scrollbar;

Upvotes: 11

Leonhard van Kann
Leonhard van Kann

Reputation: 27

well, there`s a much more easy way! just put

    ::-webkit-scrollbar {
    width: 0px;
    height: 10px;
    }

in your css style and you're done with!

Upvotes: -19

user123444555621
user123444555621

Reputation: 152956

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

Upvotes: 54

Related Questions