スクロール付きのシンプルなサイドメニューバーを持つモバイル Web サイトがあります。サファリでメニューをスクロールすると、非常に遅れます (スクロールに苦労します)。
ここに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";
}
}
toggleMenu() javascript 関数をトリガーする onclick アクションを持つメニュー ボタンがある html の残りの部分は含めませんでした。
また、既製の jQuery プラグインやその他のソリューションを使用したくありません。
助言がありますか ？