hiding scroll bars when using overflow:scroll; but keep scrolling ability [duplicate]

Question

Possible Duplicate:
hide scrollbar while still able to scroll with mouse/keyboard

I've made a piece of UI for a web app. It's a side bar and it needs to let the user scroll through it without a scroll bar. The content is 500px high, but the container is 300px high.

I've set the container to have overflow:scroll but then I get scroll bars (which I expected). I know I can disable the scroll bars using overflow:hidden but that also disables the scrolling.

Is there a way I can allow it to scroll but disable the scroll bars?

Community · Accepted Answer · 2017-05-23 12:26:42Z

5

See hide scrollbar while still able to scroll with mouse/keyboard

// get the width of the textarea minus scrollbar
var textareaWidth = document.getElementById("textarea").scrollWidth;

// width of our wrapper equals width of the inner part of the textarea
document.getElementById("wrapper").style.width = textareaWidth + "px";

Or with jQuery catching of mouse scroll with the mousewheel plugin: How can I disable a browser or element scrollbar, but still allow scrolling with wheel or arrow keys?

edited May 23, 2017 at 12:26

CommunityBot

11 silver badge

answered Aug 7, 2012 at 14:42

Willem Mulder

14.1k4 gold badges42 silver badges64 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

hiding scroll bars when using overflow:scroll; but keep scrolling ability [duplicate]

1 Answer 1

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Linked

Related