Removing scrollbars but leave scrolling functionality

Question

I know that there are almost the same questions related to scrollbars with some good answers, unfortunately that did not work for me. I want to hide scrollbars leaving scrolling functionality. Here is what I have:

<div class="sidebar">
     <div id="status"> </div>
 <..li items etc >  
    </div><!-- END SIDEBAR -->

And my CSS,

.sidebar {
 overflow: hidden;
 height: 90%;
}
.sidebar .#status {
 overflow:scroll;
}

My status id div is empty initially, and I have some list items (links) after it, what I am doing is that my status id div is being filled with li elements via ajax, since there are many of them i need scrollbar functionality, but since it is my sidebar positioned at the left side I do not want scrollbars to appear. Note: Making parent div overflow:hiddent and child one to scroll doesn't help.

This question has already been answered [here](http://stackoverflow.com/questions/13317364/remove-scrollbar-but-not-scrolling-functionality) — E_Kricheldorf, Feb 25 '15 at 08:19

score 0 · Answer 1 · answered Feb 25 '15 at 08:19

0

Try

overflow: hidden

on the parent, and then set

overflow-y: scroll

on the container. An example for you here: http://jsfiddle.net/DGmUK/

answered Feb 25 '15 at 08:19

bitten

2,463
2
25
44

score 0 · Answer 2 · answered Feb 25 '15 at 08:24

0

You can add a outer-bow that crops the scrollbars off.

.outer{
width:200px;
height:200px;
overflow:hidden;
}
.scrollbox{
width:260px;
height:200px;
overflow:scroll;
}
.inner{
width:190px;    
}

http://jsfiddle.net/johanthuresson/bj6wb0xo/1/

answered Feb 25 '15 at 08:24

johanthuresson

580
3
5

Removing scrollbars but leave scrolling functionality

2 Answers2