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.

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.

• javascript
• jquery
• html

Share Improve this question Follow asked Nov 26, 2013 at 13:33 BharathBharath 10111 gold badge44 silver badges1111 bronze badges 8

• 4 Apart from the fact if it can or cannot be done it's not really a good practice. – CaptainCarl Commented Nov 26, 2013 at 13:36
• 2 Nobody tell him! Protect the standards. ;) – Dan Grahn 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 Commented Nov 26, 2013 at 13:37
• @captaincarl yes i know, the real thing is that i have a mon 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 Commented Nov 26, 2013 at 13:40
• @joe_Benito Sorry guys , this is what you need but jsfiddle/7vbPh/1 – Bharath R Commented Nov 26, 2013 at 13:40

 |  Show 3 more ments

1 Answer 1

Sorted by: Reset to default 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>