如何禁用iPad上的模態蒙版後面的滾動？

我正在創建一個應用程序，該應用程序也應該可以在iPad上使用。現在iOS 5甚至滾動工作正常。但我的問題是，如果我有一個模式窗口，即使其他事件被禁用，模式掩碼後面的滾動也會啓用。有人知道我可以關閉模態蒙版後面的滾動嗎？如何禁用iPad上的模態蒙版後面的滾動？

實施例：

已啓用滾動網格：

.z-grid{ 
    overflow: scroll; 
    -webkit-overflow-scrolling: touch; 
    z-index: 1; 
}

模態掩模：

.z-modal-mask { 
    background:#E0E1E3 none repeat scroll 0 0; 
    height:100%; 
    left:0; 
    opacity:0.6; 
    position:absolute; 
    top:0; 
    width:100%; 
    z-index:30000; 
}

來源

2011-11-15 Marius

z-grid需要具有活性，以使z索引位置的元素。嘗試position: relative;或position: absolute;。我不能說是其中哪一種，因爲我看不到你的標記:)

.z-grid{ 
    overflow: scroll; 
    -webkit-overflow-scrolling: touch; 
    z-index: 1; 
    position: relative; /*or absolute*/ 
}

來源

2011-11-15 09:34:33 Kyle

我試過這個，有位置：相對;但它並沒有解決我的問題，也許是一個iOS5的錯誤。因爲，其他任何動作都不起作用，所以只有滾動才能在模態掩碼後面工作。如果我沒有使用-webkit-overflow-scrolling：touch;滾動被禁用，但我沒有看到滾動條了。 – Marius

所以你想禁用掩碼後面元素的滾動？我明白，模態掩碼可用時，應禁用webkit溢出滾動條。也許你可以在模態窗口處於活動狀態時使用js來改變溢出嗎？ – Kyle

是的，我認爲這是我需要做的。我想也許有人通過CSS解決了這個問題。無論如何謝謝！ – Marius

我已經經歷了很多就在後面模式的iPad禁用體的滾動答案一看，都沒有被發現特別是當模式上有一個可滾動的div時，我發現了this javascript logic from another SO user plus的組合，然後在popup popup關閉時取消了事件處理程序。

在彈出/對話框打開：

//uses document because document will be topmost level in bubbling 
$(document).on('touchmove', function (e) { 
    e.preventDefault(); 
}); 
//uses body because jquery on events are called off of the element they are 
//added to, so bubbling would not work if we used document instead. 
$('body').on('touchstart', '.scrollable', function (e) { 
    if (e.currentTarget.scrollTop === 0) { 
     e.currentTarget.scrollTop = 1; 
    } else if (e.currentTarget.scrollHeight === e.currentTarget.scrollTop + e.currentTarget.offsetHeight) { 
     e.currentTarget.scrollTop -= 1; 
    } 
}); 
//prevents preventDefault from being called on document if it sees a scrollable div 
$('body').on('touchmove', '.scrollable', function (e) { 
    e.stopPropagation(); 
});

在彈出/對話框關閉：的scrollable

$(document).off('touchmove'); 
$('body').off('touchstart', '.scrollable'); 
$('body').off('touchmove', '.scrollable');

在提到上述只是讓你確實需要滾動是從邏輯豁免元素，如果該元素有該CSS類集。

在我的情況下，我的彈出窗口中有一個可滾動的div，導致各種問題，所以要禁用背景滾動但仍然允許滾動對話框中的可滾動div，請確保您將scrollable類添加到您的可滾動div所以它被忽略。

來源

2013-11-05 00:21:14 GONeale

如何禁用iPad上的模態蒙版後面的滾動？

回答

相關問題