Hide the scrollbar but keep the ability to scroll with native feel

Question

I've searched for an answer to this question and came across hide scrollbar while still able to scroll with mouse/keyboard but the jQuery plugin doesn't quite do what I'd like to do. For one, the scrolling feels a bit sloppy and uncontrollable. The reason why I need this is simple: my page gets a little longer when you expand some items and the scrollbar appears out of the side and makes everything move to the left. I'd like to have a way to avoid this, by either being able to keep the scrollbar visible at all times or hiding it completely but still keep the native ability to scroll.

Here's an example of what I mean: http://screencast.com/t/Roi3HJtHyH when the long entry is clicked the content moves to the left, and this effect looks a little ugly.

score 13 · Answer 1 · answered Jul 09 '11 at 17:04

13

Just for completeness sake, to answer your question, here is the scrollable page without scrollbar.

Note that this is not preferred, and I would also force the scrollbar as Lobello already answered.

answered Jul 09 '11 at 17:04

NGLN

43,011
8
105
200

That by the way doesnt seem to work with touch devices. At least ipads Safari mobile says no to that. – Joonas Jul 09 '11 at 17:16
@Lobello Hmm, interesting. Another reason not to use it. – NGLN Jul 09 '11 at 17:17
@NGLN: 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 element and then fill it with some text. Then use the keyboard keys `Page Up` and `Page Down`. – Mori Dec 06 '12 at 16:41

Joonas · Accepted Answer · 2014-09-22T11:14:41.960

1

That is standard browser behavior.

Taking away scrollbar reduces user-friendliness.

You can set scrollbar to stay visible all the time with css.

CSS:

body {
    overflow-y: scroll;
}

edited Sep 22 '14 at 11:14

answered Jul 09 '11 at 15:07

Joonas

7,227
9
40
65

I think I'll go for this then. Looks like the most fitting solution. – kettlepot Jul 09 '11 at 15:27

score 0 · Answer 3 · answered Jul 09 '11 at 15:43

0

If you really want to disable the scrolling (In a frameset, the worst possible place for scrolling) then use scrolling=no.

answered Jul 09 '11 at 15:43

Eman yalpsid

511
1
5
8

score -1 · Answer 4 · answered May 23 '14 at 13:27

-1

This works for me:

    body{
        overflow:hidden;
    }

answered May 23 '14 at 13:27

taptone

1
5

Hide the scrollbar but keep the ability to scroll with native feel

4 Answers4

Linked