How to scroll a Div without a scroll bar?

Question

Is it possible to scroll vertically a div without using scrollbar instead using only mousewheel up and down for scroll ?

I have a instance like ,

<div style="height:200px">
<div class="samplediv" style="overflow:scroll;overflow-y:hidden;height:1000px">
.
.
.
.    
</div>
</div>

such that bigger div lies inside the smaller div , i want to scroll up as well as down the inner div , but i wanna hide my vertical scroll , is that possible in anyway , i tried with event hooks for scroll , but event is not hooked.

Apart from the fact if it can or cannot be done it's not really a good practice. — CaptainCarl
– CaptainCarl, Commented Nov 26, 2013 at 13:36
@CaptainCarl is correct. Users rely on the presence of a scrollbar to indicate that they can indeed scroll. You can perhaps alter the appearance of a scrollbar so that it fades when the div in question is not hovered over. Either way, it's a fair bit of CSS (quite possibly JS) trickery. — Roberto
– Roberto, Commented Nov 26, 2013 at 13:37
@captaincarl yes i know, the real thing is that i have a common scrollbar for two divs , i used to hook an event for the other div using the other div's scroll bar , but when i mousewheel up an down on the div having no scroll bar , it does looks wierd .thats why i got stucked . — Bharath
– Bharath, Commented Nov 26, 2013 at 13:40
@joe_Benito Sorry guys , this is what you need but jsfiddle.net/7vbPh/1 — Bharath R
– Bharath R, Commented Nov 26, 2013 at 13:40

Community · Accepted Answer · 2017-05-23 11:59:30Z

5

Please don't do this! It will make the interface unusable because no one will no where the can scroll!

But if you must...

How to Hide Your Scrollbars

jsFiddle Example

CSS

#wrapper {
    width: 150px;
    overflow: hidden;
    outline: 1px solid blue;
}

#scroller {
    width: 170px;
    height: 100px;
    overflow: auto;
    background: yellow;
}

HTML

<div id="wrapper">
    <div id="scroller">
        foo<br>bar<br>baz<br>foo<br>bar<br>baz<br>foo<br>bar<br>baz<br>
        foo<br>bar<br>baz<br>foo<br>bar<br>baz<br>foo<br>bar<br>baz<br>
        foo<br>bar<br>baz<br>foo<br>bar<br>baz<br>foo<br>bar<br>baz<br>      
    </div>
</div>

edited May 23, 2017 at 11:59

CommunityBot

11 silver badge

answered Nov 26, 2013 at 13:38

Dan Grahn

9,4446 gold badges41 silver badges77 bronze badges

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

2 Comments

Bharath Over a year ago

yes i know the difficult on interface but i have a scroll bar in common for two divs , that was the problem , but i got your resource useful , and also i'm aware of standards you said ;)

Dan Grahn Over a year ago

Your comment made things clearer. I would have put that in the question. :)

Collectives™ on Stack Overflow

How to scroll a Div without a scroll bar?

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related