overflow scrolling with no scrollbars

Question

How do I create a div that has a max width/height but instead of having scollbars have nothing yet still be able to scroll? (usually done via mouse wheel, selecting text and moving the mouse down or arrrows down)

I tried hidden but that doesn't let me scroll. The other options either doesn't allow it to have a max hight or puts scrollbars.

Here is a sample demo. I'd like to have no scroll bar but be able to see eof.

<div id=main>
    Text text text text text text text text...
    Text text text text text text text text...
    eof
</div>

#main {
    max-height: 400px;
    /*overflow: auto;*/
    overflow: hidden;
}

@JackPettinger: I was trying to but for some reason SO isn't allowing me to edit my post. http://jsfiddle.net/dU3bB/ — , Mar 09 '13 at 18:40
@acidzombie24 Don't *just* paste links to jsfiddle. There's a reason for the message you saw. — Wesley Murch, Mar 09 '13 at 18:48
@WesleyMurch: Yes but the code was meaningless. There was no reason to paste it. I only linked so people work on a demo and not start from scratch — , Mar 09 '13 at 18:51
I found this on SO [click here](http://stackoverflow.com/questions/7515518/css-html-scrolling-text-without-scrollbars) — Jack Pettinger, Mar 09 '13 at 18:54
@acidzombie24 It's no reason to post stupid workarounds. Other users are taking example from you. — Wesley Murch, Mar 09 '13 at 18:55
This sounds like an all-round bad idea for accessibility reasons. If you hide the scroll bar, how do you know that the content can scroll? Please don't say you want this so you can implement your own custom javascript scroll bar, your users will start wishing they could hate you to death. — cimmanon, Mar 09 '13 at 19:01

score 5 · Answer 1 · edited May 23 '17 at 10:30

5

How about pushing the scrollbar into the hidden area ?

html,
body {
    padding: 0;
    margin: 0;
    overflow: hidden;
}
#container {
    position: absolute;
    left: 0;
    top: 0;
    right: -30px;
    bottom: 0;
    padding-right: 15px;
    overflow-y: scroll;
    max-height: 400px;
}

JSFiddle.

Example from SO - Hide the scrollbar but keep the ability to scroll with native feel.

edited May 23 '17 at 10:30

Community

1
1

answered Mar 09 '13 at 18:49

Vucko

20,555
10
56
107

score 2 · Answer 2 · answered Mar 09 '13 at 18:47

2

For web kit engine supported browser(like Chrome) you can use this

#main ::-webkit-scrollbar 
{
    width: 0px;
}

but for other browser you need to something else.

answered Mar 09 '13 at 18:47

Sachin

40,216
7
90
102

overflow scrolling with no scrollbars

2 Answers2

Linked