43

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?

Improve this question
0

2 Answers 2

Reset to default
63

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.

Improve this answer
9
  • 2
    Here's how to calculate scrollbar sizes from JavaScript.
    – natevw
    Commented May 22, 2012 at 15:44
  • I was avoiding JS, as many users have NoScript or other unusual setups - pure CSS is more reliable.
    – SamGoody
    Commented May 23, 2012 at 8:27
  • 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.
    – Vic Goldfeld
    Commented Aug 7, 2012 at 11:51
  • 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.
    – dave
    Commented Aug 9, 2012 at 7:45
  • 1
    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.
    – Mori
    Commented Dec 6, 2012 at 16:24
1

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; })

Improve this answer
3
  • 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.
    – Agat
    Commented Mar 27, 2013 at 15:51
  • 2
    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??!
    – vitch
    Commented Mar 28, 2013 at 16:57
  • 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.
    – Agat
    Commented Mar 29, 2013 at 12:48

Not the answer you're looking for? Browse other questions tagged or ask your own question.