Using jQuery to hide div scrollbar, but retain scrolling?

Question

I am trying to be able to scroll inside one div but without showing the actual scrollbar.

I need the user to be able to scroll using the scrollwheel

Does anyone have ideas as to how I can accomplish this?

Thanks!

Answer 1

Well, the real reason would be why you would want that, but since you asked I will try and solve your issue.

You will need two divs. One nested inside the other.

<div class="outside">
    <div class="inside">
        Scrolling Content Goes here.
    </div>
</div>

You will then need some CSS to help this situation out. The overflow:auto will give you the scrolling once it goes past the height limitations. I put on an random width for sake of the example. Putt a padding on the right hand side to push the scroll bar out of the .outer div class. This way you won't have to worry about the content going under the .outer div.

.inside { width: 500px; overflow: auto; height: 300px; padding-right: 20px; }

for the outer class you will need to specify the same height, same width, but overflow:hidden.

.outside { width: 500px; height: 300px; overflow: hidden; }

EXAMPLE: jsFiddle