Chrome手機忽略溢出

我正在玩創造一個android的webapp。我一直使用JQM的phonegap，但是我遇到了問題。Chrome手機忽略溢出

我正在實施滑入式菜單，爲此我在互聯網上找到了一個簡單示例。

http://www.aldomatic.com/jqm/fb-menu-style/

這種簡單的菜單從左側的幻燈片，而該部分的偉大工程，但是當我嘗試將其滑動在我得到的一個問題。整個頁面滾動，這就是儘管我有

#mobileViewport { 
    overflow: hidden; 
}

（body標籤具有的mobileViewport

我試圖將它添加到html標記過的ID，但無濟於事。

這是一個錯誤嗎？是有什麼解決辦法？

來源

2012-12-30 Delusional Logic

默認情況下，JQM頁面定位絕對，其包含元素的流之外（若包含的元素是靜態p ositioned）。

因此在容納元素（主體）上添加overflow:hidden不會有幫助。

如果您將position:relative應用於#mobileViewport，應該會導致JQM移動頁面現在從包含元素正確流動，並且overflow:hidden應該可以正常工作。

但是，我懷疑這可能不是一個好主意，並且一定會導致其他CSS顯示問題。（我記得自己一次玩過這個遊戲，還有其他問題作爲副作用）

可能是一個更好的主意是添加溢出：隱藏到JQM頁面元素本身。

<body class="ui-mobile-viewport"> 
    <div id="mypage" data-role="page" class="ui-page"> 
    ... 
    </div> 
</div> 

#mypage { 
    overflow:hidden; 
}

注意：如果你有一個頁腳，你可能需要將overflow:hidden應用到子.ui-content元素來代替。

來源

2012-12-31 04:13:03 asgeo1

Chrome手機忽略溢出

回答

相關問題