Remove HTML scrollbars but allow mousewheel scrolling

Question

Possible Duplicate:
How to disable browser or element scrollbar, but allow scrolling with wheel or arrow keys?

I was able to disable vertical scrollbars in a grid by setting the CSS property overflow-y: hidden. However, this removed the ability to scroll the contents with the mouse wheel as well.

Is there a way to not show the scrollbars but still allow the contents to be scrolled through mouse wheel or arrow keys?

Solution 1

There are Javascript methods, see the thread you duplicated.

A better solution is to set the target div to overflow:scroll, and wrap it inside a second element that is 8px narrower, who's overflow:hidden.

The target element will have a hidden scrollbar. The mousewheel will work, but the scroll bar will not show.

<div style='overflow:hidden; width:200px;'>
   <div style='overflow:scroll; width:208px'>
      My mousewheel scrollable content here....
   </div>
</div>

Note that 8px as the width of the scrollbar is a random number - it's probably a lot more, and it could require per browser CSS.

Still better than JS in my book.

Solution 2

You could use jScrollPane which allows you to replace the browser scrollbars with custom ones:

Since you can style these custom scrollbars with CSS you could easily make them disappear (try something like: .jScrollPaneTrack { display: none; })

Comments

[natevw]

Here's how to calculate scrollbar sizes from JavaScript.

[SamGoody]

I was avoiding JS, as many users have NoScript or other unusual setups - pure CSS is more reliable.

[Vic Goldfeld]

I was going for this solution but found out my scroll bar gets hidden automatically as my absolute position inner div sets itself to 215px (15px scrollbar) while keeping left: 0. Could I have any potential problems with it? I'm not quite sure which rules are making it work though.

[dave]

Great solution. A little improvement to it is to use relative width for the inner div, i.e. <div style="overflow:scroll; width: 104%">. This makes sure that when the outer div gets resized the inner div adapts to the new width too.

[Mori]

Try your demo in Chrome/Safari: highlight/select a line and drag your mouse to the right and you'll see the scrollbar. Or use a textarea instead of the inner div and then fill it with some text. Then use the keyboard keys Page Up and Page Down.

[Agat]

This is an opposite answer on the question was asked! The reason why they require ability to be able to scroll with mouse wheel (like natural scrolling) and have custom scroll bars is, for instance, because jScrollPane (and many others) won't work with touchable devices. Btw, one more reason why I would not recommend to use jScrollPane is at least because its samples hosted on some environment which even does not support case-insensetive urls! Which is pretty confusing when typing manually to test on iPhone or any other device.

[vitch]

It seems to me it answers the question. jScrollPane does work with touch devices. And certainly works with the mouse wheel and arrow keys (which is what the question actually asks). Your other reason is because it's hosted on *nix (like the vast majority of the web) and you have trouble reading or typing capitals??!

[Agat]

Its behaviour confirmed my thoughts. I don't know in what conditions the pane must work on touchable devices, but on this link: kelvinluck.com/assets/jquery/jScrollPane/basic.html it DID NOT work for my iPhone. Neither of those samples. It did not work neither when trying to swipe content of the blocks, nor allowed to drag scroller. It was working only on clicking on the bar (page up/page down). And I've "minused" your answer, because I was looking for the same solution which author was looking for, but this suggestion solves nothing in that context. Sorry, but that's my oppinion.

[smets.kevin]

Another way to solve it in this manner (since this is the first result you get from ggl): In the child div, you set margin-bottom to -100px and padding-bottom to 100px (or right if you have a vertical scrollbar), box-sizing to border-box and height 100%. Overflow stays the same, this way you're not stuck with fixed width / height issues.

[SHEKHAR SHETE]

If i want to use the value for main div width is "100% and height is "100%" then how much should i specify width in percentage for inner div and height also in percentage?

[Michael De Keyser]

meh. Works like a charm with chrome but can't scroll anymore on Firefox. I can scroll with keys but not with the wheel..

[71GA]

Not working for relative widths.