iPad wyłącza przewijanie dokumentu, ale nie przepełnienie div div

Question

Zajmuję się tworzeniem okien modalnych z możliwością przewijania, takich jak te z Pinterest. Po zwolnieniu zdefiniuj overflow: hidden na body i overflow: auto na kontenerze modalnych skrzynek. Działa to bardzo dobrze w przeglądarkach na komputerach, ale mój pierwszy test na iPadzie (i zakładam, że prawdopodobnie na iOSie w ogóle) ujawnia problem:

Kiedy przewijanie modala się kończy, jeśli dokument jest dłuższy niż modalny, przewijanie trwa.

Próbowałem to z zamiarem tylko akceptuje przewijania, jeśli jest wywołane przez modal lub jego opakowaniem:

// Disable browser scrolling on iOS 
$(document).on('touchmove',function(e) { 
    if (($(e.target).attr('id') != id) && 
    ($(e.target).attr('id') != ('modal-'+id))) { 
     e.preventDefault(); 
    } 
}); 

i to naprawdę działa robi dokładnie to. Zwoje modalne i kiedy kończy się przewijanie strony jest możliwe tylko wtedy, gdy przewiniesz wewnątrz modalu.

Czy masz jakiś pomysł?

Wypróbuj go w swoich iPadów jeśli chcesz (trzeba kliknąć na przycisk modalnej): http://www.onebigrobot.com/beta/altair/transforms-so

Z góry dziękuję!

Answer 1

Małe zmiany są potężne!

Cały problem rozwiązuje się zmieniając position: absolute przez position: fixed na modalnym kontenerze (a także na ciemnej masce tła, jeśli jest to konieczne). W rzeczywistości z absolutnym pozycjonowaniem modal działał tylko dlatego, że przycisk znajdował się u góry strony.

Przy ustawionych pozycjonujących przeglądarkach komputerowych działa idealnie, a na iPadzie dzieje się coś ciekawego. Po zakończeniu przewijania modalu przewijanie strony zaczyna działać, ale z modalem zawsze dobrze ułożonym na górze.

Mam nadzieję, że to pytanie może być przydatne dla kogoś.