How do you hide the scrollbar but allow scrolling?

Question

I want to make my own scrollbar but to get that done I first need to hide the default scrollbar but allow scrolling.

I already tried:

overflow-y:hidden;

but than you hide the scrollbar and disable scrolling.

I know it there are other people who asked this questions here but I don't want to just at a padding to hide it. I want a way tho hide it completly.

Answer 1

you dont have to allow manual scrolling, you could scroll programatically. just get your custom scrollbar's position and scroll the content accordingly...

here is a short example with buttons:

 document.getElementById("right").addEventListener("mousemove",function(){ document.getElementById("outer").scrollLeft+=10; }); document.getElementById("left").addEventListener("mousemove",function(){ document.getElementById("outer").scrollLeft-=10; }); 

 #outer { float:left; border:2px solid red; height:100px; width:200px; display:inline-block; overflow-x:hidden; } #inner { display:block; height:100%; white-space:nowrap; } #left { float:left; border:2px solid red; height:100px; width:50px; display:inline-block; background:lime; line-height:100px; } #right { float:left; border:2px solid red; height:100px; width:50px; display:inline-block; background:lime; line-height:100px; } 

 <div id="left">&lt--</div> <div id="outer"> <div id="inner">sdk hfkhsdbf khsdbf kbsdf kbsdkjf sdkjbg lsdkbg;kSBGKdbs gksbd gksdb g</div> </div> <div id="right">--&gt</div> 

Answer 2

您可以隐藏滚动条，但允许使用以下属性在Firefox中滚动：

scrollbar-width: none;

Answer 3

The best way to do this is using a jQuery plugin.

The most customizable and flexible one is jScrollPane which works for both vertical and horizontal scrolling and allows you to easily style it using CSS by applying styles to elements like handle, rail, wrapper etc. Note that scrollbals do require styling as they are quite ugly out of the box.

If you want something prettier try perfect-scrollbar which nicely mimics the behaviours of scrollbars to look like those on Mac OS X (nice and thing, visible only when needed).

I've also used jQuery-slimScroll and it also did the job very well. Lightweight, easy to use, good looking plus easy to style, but not as customizeable as the first one.

It is theoreticaly also possible to just hide the scrollbar using CSS only, but this is hacky and very bad for user experience. I would definetly go with a jQuery plugin solution as they will deal with default scrollbars all by themselves.

Answer 4

Here's the CSS:

::-webkit-scrollbar {
    height: 0px !important;
    width: 0px !important;
    display: none !important;
}

Also see the Developer Documentation on webkit.org.