[英]side menu scroll lags on safari (ios)
我有一个移动网站,该网站带有一个带有滚动功能的简单侧边菜单栏,当在野生动物园中滚动菜单时,它会滞后很多(难以滚动)。
这是HTML:
<body>
<div id="menu_background" onclick="toggleMenu()"></div>
<div id="menu">
<ul>
<li>
<div>item 1</div>
</li>
//other items goes here
</ul>
</div>
<div id="global_container">
//some content goes here
</div>
</body>
这是CSS:
#menu
{
position: absolute;
top: 0px;
bottom: 0px;
z-index: 100;
overflow: hidden;
display:none;
width: 0%;
padding: 1%;
}
和javascript:
var menuShown = false;
function toggleMenu(){
var menu = document.getElementById("menu");
var menuBackground = document.getElementById("menu_background");
var globalContainer = document.getElementById("global_container");
if(!menuShown){
menuShown = true;
menuBackground.style.visibility = "visible" ;
menu.style.width="60%";
menu.style.display="block";
menu.style.overflowY="auto";
globalContainer.style.position="fixed";
globalContainer.style.right="62%";
}
else{
menuShown = false;
menuBackground.style.visibility = "hidden" ;
menu.style.width="0%";
menu.style.display="none";
menu.style.overflowY="hidden";
globalContainer.style.position="static";
}
}
我没有在HTML的其余部分中包含一个带有onclick动作的菜单按钮,该按钮会触发toggleMenu()JavaScript函数。
另外,我也不想使用现成的jQuery插件或其他解决方案。
有什么建议么 ?
在CSS中使用以下命令解决:
而不是在CSS #menu选择器中使用以下内容
overflow: hidden;
用这个代替
overflow-y: scroll;
overflow-x: hidden;
-webkit-overflow-scrolling: touch;
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.