Scroll content without scrollbar using CSS

Question

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!

All of your examples and solutions below worked for me. But I had to select the one that worked first. Thank you all! — user1467439
– user1467439, Commented Apr 30, 2014 at 18:43

Sunny Patel · Accepted Answer · 2014-04-30 18:13:28Z

3

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 ).

answered Apr 30, 2014 at 18:13

Sunny Patel

8,0972 gold badges35 silver badges47 bronze badges

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

Comments

souslov · Accepted Answer · 2014-04-30 18:18:30Z

1

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

edited Apr 30, 2014 at 18:18

answered Apr 30, 2014 at 18:08

souslov

44.7k11 gold badges92 silver badges113 bronze badges

Comments

Aero · Accepted Answer · 2014-05-01 06:31:12Z

1

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;
}

edited May 1, 2014 at 6:31

answered Apr 30, 2014 at 18:26

Aero

3171 gold badge5 silver badges15 bronze badges

Collectives™ on Stack Overflow

Scroll content without scrollbar using CSS

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related