所有网页设计都是响应式的。有一个固定的标题、主体容器和左侧菜单。当单击顶部菜单上的图标时,将在主体容器上打开左侧菜单。
有两个问题:
- 在左侧菜单上,我无法垂直滚动。
- 尝试滚动时,正文正在滚动。
我的 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 开启函数:
$(".menuIcon").click(function () {
$('.leftmenu').toggle( "slide" );
});
谢谢...
编辑:如果有人有同样的问题,下面给出了解决方案。但是在 iOS 上有一点令人不安,在滚动结束后,父对象(此代码中的#container)开始再次滚动。为避免这种情况,请将此行添加到 .leftmenu:
-webkit-overflow-scrolling: touch;
最佳答案
您应该给 .leftmenu
一个高度或最大高度并将溢出设置为自动。
关于jquery - 左面板滚动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19588251/