How can I hide the scrollbar but allow scrolling?
I want to make my own scrollbar, but for this I first need to hide the default scrollbar but allow scrolling.
I've already tried:
overflow-y:hidden;
but you hide the scrollbar and disable scrolling.
I know there are other people who have asked this question here, but I don't want to just fill it out to hide it. I want this to hide it completely.
source to share
you don't need to allow manual scrolling, you can scroll programmatically. just enter your own scrollbar and scroll the content accordingly ...
here is a quick 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"><--</div>
<div id="outer">
<div id="inner">sdk hfkhsdbf khsdbf kbsdf kbsdkjf sdkjbg lsdkbg;kSBGKdbs gksbd gksdb g</div>
</div>
<div id="right">--></div>
source to share
The best way to do this is using the jQuery plugin.
The most customizable and flexible jScrollPane that works for both vertical and horizontal scrolling and makes it easy to style with CSS by applying styles to elements such as handle, rail, wrapper, etc. Note that scrolls require styling as they are pretty ugly out of the box.
If you want something prettier , try the perfect-scrollbar , which nicely simulates the behavior of scrollbars to make them look like they do on Mac OS X (nice and nice, only visible when needed).
I also used jQuery-slimScroll and it did the job just fine as well. Lightweight, easy to use, beautiful and easy to use, but not as customizable as the first one.
It is also theoretically possible to just hide the scrollbar with CSS only, but this is hacky and very bad for users. I would definitely go with a jQuery plugin as they will handle scrolling by default.
source to share
Here's the CSS:
::-webkit-scrollbar {
height: 0px !important;
width: 0px !important;
display: none !important;
}
Also see the developer documentation at webkit.org.
source to share