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?
How to Hide the Vertical Scrollbar in CSS. To hide the vertical scrollbar and prevent vertical scrolling, use overflow-y: hidden like so: HTML.
The combination of html { overflow:auto; } and . site { overflow-x:hidden; } seems to be causing this. Remove both, if possible. (How to handle the main scrolling is best left to the browser, and not messed with by your own CSS.)
A quick fix is to add overflow: hidden to the CSS for your #footer . Note: A scrollbar will still appear if your #body content flows out of the the viewport. Show activity on this post. It will remove unnecessary scroll bars.
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.
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; }
)
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With