Hide scrollbar while still being able to scroll with mouse/keyboard [duplicate]

Question

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

I want to know if it is possible to hide the scrollbar, while scrolling is still enabled with mouse/keyboard.

I tried to use CSS: overflow: hidden;. The effect is scrollbar disabled and scrolling disabled.

HonzaBé · Accepted Answer · 2023-02-27 09:39:04Z

45

For future reference there is also a solution without jQuery - just have the wrapper div style contain overflow:hidden and use this JavaScript two-liner:

// 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";

Update: you can use the same principle to create scrollable div without scrollbar.

edited Feb 27, 2023 at 9:39

answered Mar 31, 2012 at 22:34

HonzaBé

7711 gold badge16 silver badges27 bronze badges

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

3 Comments

cocoa coder Over a year ago

Nice, but what's about browser and mobile compatibility for this ?

Gavin Over a year ago

@cocoacoder you could always TRY it in different browsers and mobile if you're wondering... I tested on iOS and IE9 and it works fine. There's nothing too hacky about this approach, so it should be pretty cross-compatible. As long as the platform supports the scrollWidth property it will work fine.

Mahdi Jazini Over a year ago

it seems all browsers around the world supports it: w3schools.com/jsref/prop_element_scrollwidth.asp

Mathias Rechtzigel · Accepted Answer · 2014-08-13 14:14:20Z

5

There is a jQuery plugin called Scrollable that does what you want.

edited Aug 13, 2014 at 14:14

Mathias Rechtzigel

3,6141 gold badge22 silver badges39 bronze badges

answered Jul 20, 2010 at 19:41

Peter Örneholm

2,85820 silver badges24 bronze badges

Comments

slugster · Accepted Answer · 2011-07-10 02:12:18Z

0

Not natively, but I suppose you could implement your own scrolling mechanism by using Javascript to capture certain keystrokes and re-position the container element accordingly with CSS. It's going to be ugly, though!

edited Jul 10, 2011 at 2:12

slugster

50k14 gold badges105 silver badges150 bronze badges

answered Jul 20, 2010 at 19:40

Josh Stodola

82.8k48 gold badges187 silver badges229 bronze badges

Collectives™ on Stack Overflow

Hide scrollbar while still being able to scroll with mouse/keyboard [duplicate]

3 Answers 3

3 Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Linked

Related