如何在手機上創建模態導航菜單並防止滾動？

Question

我尋找並測試了很多解決方案，但是我無法完成它的工作。我希望子導航菜單（模態）能夠在顯示時滾動，但不是機體。

我想：

1：使用Javascript改變CSS屬性爲 「固定」 時態開：

var main = document.getElementById('main'); 
main.setAttribute("style", "position: fixed;"); 

問題：如果您滾動頁面，當你打開模式，頁面上升（如「固定」也意味着你不能有一個滾動條）

2：使用Javascript改變CSS屬性設置爲「隱藏溢出」時態開：

document.body.setAttribute("style", "overflow: hidden;"); 

問題：不適用於手機，仍然滾動（我使用的是android）。

3：禁用的Javascript觸摸事件：

var main = document.getElementById('main'); 
main.addEventListener('touchstart', function(e){ e.preventDefault(); }); 
main.addEventListener('scroll', function(e){ e.preventDefault();}); 
main.addEventListener('touchmove', function(e){ e.preventDefault();}); 

問題：除非你開始從子導航菜單中觸摸作品。

見這對更好地理解我的意思：http://i45.tinypic.com/ajl3rt.png

那麼，如何防止身體在移動設備滾動時，顯示疊加菜單？

Answer 1

我有類似的問題。通常溢出：隱藏在桌面上完成此操作。對於移動設備，您還需要應用固定位置。因此，當您的對話框處於活動狀態時，請將「.noscroll」類添加到正文中：

body.noscroll{ 
overflow:hidden; 
position:fixed; 
}