css hide scrollbar?

Question

I am wanting to have a div area scrollable on my page and have set the overflow on my div CSS to scrollable but now I want to hide the scrollbar in all browsers, so the div can scroll without the scrollbar/panel displaying, including hiding that awful scroll panel in Firefox, I know how to hide the scrollbar in chrome but this doesn't work in firefox, can anyone suggest anything thanks?

here's what i'm using to hide the scrollbar in chrome and other webkit browsers:

#element::-webkit-scrollbar { 
    display: none; 
}

Answer 1

Not pure CSS (since you have to add an extra element) but how about making your div a bit wider and then wrapping it in another div with overflow:hidden?

The inner div would still scroll but the scroll bar would be outside the margins of the outer div, so they would not be visible.

Answer 2

i found someone gives that answer:

.noscrollbar{
  -ms-overflow-style:none;
  overflow:-moz-scrollbars-none;// but it seems to not work...
}
.noscrollbar::-webkit-scrollbar{width:0px}

Answer 3

This has worked for me

::-webkit-scrollbar {
      width: 0 !important;
   }
-ms-overflow-style: none;