Mobil ortamda modal gezinme menüsü nasıl oluşturulur ve gövde kaydırmayı nasıl önlersiniz?

Question

Birçok çözüm aradım ve test ettim, ancak henüz çalışamıyorum. Subnavigasyon menüsünün (modal), gösterildiğinde değil, kaydırılabilmesini istiyorum.

Denedim:

1: JavaScript CSS özelliğini değiştirerek "sabit" modal açık:

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

Sorun: Eğer modal açtığınızda sayfayı kaydırma durumunda, sayfa ("sabit" olarak ayrıca bir kaydırma çubuğu olamaz anlamına gelir) gider

2: JavaScript için "taşma gizli" CSS özelliğini değiştirirken modal açık:

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

Sorun: Mobil cihazlarda çalışmaz, yine de (Android'i kullanıyorum).

3: JavaScript devre dışı dokunmatik olaylar:

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();}); 

Sorun: Eğer alt gezinti menüsü içinden dokunmadan başlarsanız hariç eserler. http://i45.tinypic.com/ajl3rt.png

Sonra bir bindirme menü nasıl bir mobil cihazda kaydırma vücut önlemek için görüntülendiğinde:

bu iyi demek istediğimi anlamak için bakın?

Answer 1

Benzer bir sorun yaşadım. Genellikle taşma: Gizli, bunu masaüstünde gerçekleştirir. Cep telefonu için de sabit konum uygulamanız gerekecek. Böylece, iletişim kutunuz aktif olduğunda, gövdeye bir ".noscroll" sınıfı ekleyin:

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