CODEWITHSUNDEEP
htmlcss
user1467439
user1467439

Reputation: 389

Scroll content without scrollbar using CSS

I am trying to scroll a content child of a fixed div. I am trying to scroll without the scroll bar being visible (using the mouse scroll). I have pretty much tried all the solutions I came across on Stackoverflow and on google in general but no success.

Please find here the JSfiddle of the problem:

THE CSS:

#left-panel {
    position:fixed;
    height:100%;
    top:0px;
    left:0px;
    border:1px solid red;
    width:220px;
    overflow: hidden;
}

nav {
    position:relative;
    height:100%;
    overflow-x:hidden;
    overflow-y:auto;
}

JS FIDDLE: http://jsfiddle.net/5Xg5v/2/

Please note that the parent div must be fixed and must be 100% height.

Thank you in advance!

Upvotes: 1

Views: 4815

Answers (3)

Aero
Aero

Reputation: 317

You can style the scrollbar using webkit.

element::-webkit-scrollbar {styling here}

In order to hide the scroll bar on your nav element you can use the following:

nav::-webkit-scrollbar {
    width:0!important;
}

Upvotes: 1

potashin
potashin

Reputation: 44581

You can try the following :

#left-panel {
    position:fixed;
    height:100%;
    top:0px;
    left:0px;
    border:1px solid red;
    width:220px;
    overflow:hidden;
}

nav {
   height:100%;
   overflow-y:auto;
   overflow-x:hidden;
   width:100%;
   padding-right: 15px;      
}

Example

Upvotes: 1

Sunny Patel
Sunny Patel

Reputation: 8077

You could kinda hack it cross-browser by expanding the width of the nav element and force scrollbars. Updated JSFiddle.

nav {
    position:relative;
    height:100%;
    width: 110%;         /*  <----   */
    overflow-x:hidden;
    overflow-y:scroll;   /*  <----   */
}

Of course, you'll want to adjust the percentage to your needs or use calc( 100% + 15px ).

Upvotes: 3

Related Questions