0

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;
3
  • Is there a URL where the site can be seen?
    – techfoobar
    Oct 25, 2013 at 11:13
  • 2
    Can you create a jsfiddle for this one? Oct 25, 2013 at 11:14
  • link but Krisna and Ronald's solution solved the problem, thank you...
    – Brainiac
    Oct 25, 2013 at 16:24

2 Answers 2

5

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

0
1

Try setting height to 100% in .leftmenu.

1
  • Thank you Krishna, your solution also fixes the problem but I gave check to Ronald because of giving right answer before you. I think this is fair judgement.
    – Brainiac
    Oct 25, 2013 at 16:27

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.