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. jsfiddle.net/dU3bB — user34537
– user34537, Commented Mar 9, 2013 at 18:40
@acidzombie24 Don't just paste links to jsfiddle. There's a reason for the message you saw. — No Results Found
– No Results Found, Commented Mar 9, 2013 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 — user34537
– user34537, Commented Mar 9, 2013 at 18:51

Community · Accepted Answer · 2017-05-23 10:30:01Z

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, 2017 at 10:30

CommunityBot

11 silver badge

answered Mar 9, 2013 at 18:49

Vucko

20.9k12 gold badges60 silver badges108 bronze badges

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

Comments

Sachin · Accepted Answer · 2013-03-09 18:47:12Z

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 9, 2013 at 18:47

Sachin

41.1k7 gold badges94 silver badges107 bronze badges

Collectives™ on Stack Overflow

overflow scrolling with no scrollbars

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related