側面菜單滾動滯后於野生動物園（iOS）

Question

我有一個移動網站，該網站帶有一個帶有滾動功能的簡單側邊菜單欄，當在野生動物園中滾動菜單時，它會滯后很多（難以滾動）。

這是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插件或其他解決方案。

有什么建議么？

Answer 1

在CSS中使用以下命令解決：

而不是在CSS #menu選擇器中使用以下內容

overflow: hidden;

用這個代替

overflow-y: scroll;
overflow-x: hidden;
-webkit-overflow-scrolling: touch;

側面菜單滾動滯后於野生動物園（iOS）

問題描述

1 個解決方案

解決方案1
0 已采納 2013-08-18 18:45:34

側面菜單滾動滯后於野生動物園（iOS）

問題描述

1 個解決方案

解決方案1 0 已采納 2013-08-18 18:45:34

解決方案1
0 已采納 2013-08-18 18:45:34