how to hide scroll bar for one div if two divs in one page of html

Question

HTML:

<div class="container">
    <div class="mainContent"></div>
    <div class="sidebar"></div>
</div>

CSS:

#container {
    min-width: 1170px;
    width: 95%;
    margin-left: auto;
    margin-right: auto;
}

#mainContent {
    min-width: 1200px;
    width: 85%;
    float: left;
}

#sidebar {
    min-width: 200px;
    position: fixed;
    width: 15%;
    display: inline-block;
    margin: 0px 0px 5px 5px;
    vertical-align: middle;
    max-height: 810px;
    overflow: auto;
}

Here mainContent is scrolling with fixed sidebar.

I am trying to give scrolling property for sidebar separately using overflow: auto. But I wish to hide sidebar's scrollbar.Just hide not disabling scrolling.

Can you to tell me how to do this with above properties?

Possible duplicate: http://stackoverflow.com/questions/16670931/hide-scroll-bar-but-still-being-able-to-scroll — Timble, Feb 10 '16 at 11:46
Struggling with this for one week..any one pls help me to sort it out — Nithya.K, Feb 12 '16 at 06:23

score 0 · Answer 1 · edited Nov 13 '17 at 17:33

0

You can try this:

    #mySidenav {
        overflow-x: hidden; 
        -webkit-scrollbar{
        width: 0px;
        background: transparent;
    }

edited Nov 13 '17 at 17:33

DaFois

2,197
8
26
43

answered Nov 13 '17 at 16:46

H. Mirza

11
2

how to hide scroll bar for one div if two divs in one page of html

1 Answers1