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.

possible duplicate of [Hide scroll bar, but still being able to scroll](http://stackoverflow.com/questions/16670931/hide-scroll-bar-but-still-being-able-to-scroll) — alex, Dec 25 '14 at 16:43
After skimming over the answers on the linked question I think there is room to ask this question again. The previous answer was for a specific set of browsers and the auther of that answer even said if you wanted broader browser support then you should ask again this time for broader support. — Jason Sperske, Dec 25 '14 at 16:49

score 0 · Answer 1 · answered Dec 26 '14 at 00:37

0

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>

answered Dec 26 '14 at 00:37

Banana

7,424
3
22
43

This is not what I want. I can make this to. What I want is that the vertical scrollbar is hidden but that you still can scroll and not how you did it but thanks for trying to help me. – Vinc199789 Dec 26 '14 at 09:38
It is still the same, just add an event listener to the scrollable part to monitor for mouse wheel movements, or keyboard arrows, and scroll programatically accordingly. – Banana Dec 26 '14 at 09:41
Do you know how to detect a scroll up or down by javascript or Jquery? I made my own scrollbar but detecting scrolling up or down is the only thing that I can't fix. – Vinc199789 Dec 26 '14 at 09:46
The mouse wheel events are "mousewheel" and in firefox "DOMMouseScroll". Scrolling regardless of the means is detected by the "scroll" event or jQuery `.scroll()`. You need a global variable to hold the scroll position, and each time the page is scrolled check if the position is greater or lower than the previous value, that way you will know the scroll direction. – Banana Dec 26 '14 at 09:49

score 0 · Answer 2 · edited Jan 23 '19 at 10:30

0

You can hide the scrollbar but allow scrolling in Firefox by using below property:

scrollbar-width: none;

edited Jan 23 '19 at 10:30

barbsan

3,418
11
21
28

answered Jan 23 '19 at 10:17

Hari Hara

1
1

score -2 · Answer 3 · answered Dec 25 '14 at 19:41

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.

score -2 · Answer 4 · edited Dec 25 '14 at 22:59

-2

Here's the CSS:

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

Also see the Developer Documentation on webkit.org.

edited Dec 25 '14 at 22:59

jww

97,681
90
411
885

answered Dec 25 '14 at 22:15

Cuup

1
1

3

you realize webkit is not the only engine right...? – Ryan Dec 25 '14 at 23:01

How do you hide the scrollbar but allow scrolling?

4 Answers4