Jak stworzyć modalne menu nawigacyjne na komórce i zapobiec przewijaniu ciała?

Question

Szukałem i testowałem wiele rozwiązań, ale nie mogę jeszcze sprawić, by działało. Chcę, aby menu podrzędne (modalne) było w stanie przewijać, gdy jest pokazywany, ale nie ciało.

Próbowałem:

1: Javascript zmianę właściwości CSS na "stałe" gdy modalne otwarty:

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

Problem: Jeśli przewijanie strony po otwarciu modal, strona idzie w górę (jako "ustalony" oznacza także, że nie możesz mieć paska przewijania)

2: JavaScript zmieniający właściwość CSS na "przepełnienie ukryte", gdy modalne jest otwarte:

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

Problem: Nie działa na urządzeniach mobilnych, wciąż przewija (korzystam z Androida).

3: JavaScript wyłączanie zdarzenia dotykowe:

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

Problem: Works wyjątkiem jeśli zaczniesz dotykać od wewnątrz menu subnavigation.

Zobacz to lepiej zrozumieć, co mam na myśli: http://i45.tinypic.com/ajl3rt.png

Potem, jak zapobiegać ciało przewijania w urządzeniu przenośnym, gdy wyświetlane jest menu nakładka?

Answer 1

Miałem podobny problem. Zwykle przepełnienie: hidden realizuje to na pulpicie. W przypadku urządzeń mobilnych musisz również zastosować ustaloną pozycję. Tak więc, gdy okno dialogowe jest aktywne, dodaj do ciała ".noscroll":

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