CODEWITHSUNDEEP
jqueryhtmlcss
Brainiac
Brainiac

Reputation: 33

Left Panel Scrolling

All webpage design is reponsive. There is one fixed header, body container and left menu. When icon clicked on the top menu, there will be left menu opening onto body container.

There is 2 problem:

  1. On left menu, I cannot scroll vertically.
  2. While trying to scroll, body is scrolling.

My CSS:

body {
color:#000;
background-color:#ffffff;
max-width: 99.2%;
margin: 0;
}

#container
{
font-family: 'Open Sans',Verdana,Helvetica,Arial,sans-serif;
width: 99.2%;
margin: 0;
background: #FFF;
padding: 2em 0.5em;
}

.leftmenu
{
display: none;
min-width: 30%;
max-width: 90%;
background: #262626;
z-index: 999;
min-height: 200em;
color: #ffffff;
position: fixed;
overflow: scroll;
overflow-x: hidden;
}
.leftmenuContainer
{
margin-left: 0.5em;
width: 95%;
}

JQuery open function:

$(".menuIcon").click(function () {
        $('.leftmenu').toggle( "slide" );
        });

Thank you...

Edit: If someone have same problem, solution is given below. But there is something little disturbing that on iOS, after you reach the end of scrolling, parent object (#container in this code) begins to scroll again. To avoid this, add this line to .leftmenu:

-webkit-overflow-scrolling: touch;

Upvotes: 0

Views: 313

Answers (2)

KrishnaDhungana
KrishnaDhungana

Reputation: 2684

Try setting height to 100% in .leftmenu.

Upvotes: 1

redelschaap
redelschaap

Reputation: 2814

You should give .leftmenu a height or max-height and set overflow to auto.

Upvotes: 5

Related Questions