iPad disabilita scorrimento documento ma non div scroll scorrimento

Question

Sto sviluppando finestre modali con la possibilità di essere scorrevoli, come quelle di pinterest. Quando vengono licenziati, definire e overflow: auto nel container modal box con overflow: hidden. Funziona molto bene sui browser desktop ma il mio primo test su iPad (e presumo che probabilmente su iOS in generale) rivela un problema:

Quando lo scorrimento della modale termina, se il documento è più lungo del modale lo scorrimento continua.

Ho provato questo con l'intenzione di accettare solo scorrendo se viene attivato dalla modale o il suo contenitore:

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

E funziona davvero fare rigorosamente quello. Le pergamene modali e quando termina lo scorrimento della pagina è possibile solo se si scorre all'interno del modale.

Avete qualche idea?

provare in vostri iPad se si vuole (si deve cliccare sul pulsante modale): http://www.onebigrobot.com/beta/altair/transforms-so

Grazie in anticipo!

Answer 1

Piccoli cambiamenti sono potenti!

Tutto il problema viene risolto cambiando position: absolute per position: fixed sul contenitore modale (e anche sulla maschera scura dello sfondo se necessario). In effetti con il posizionamento assoluto, il modale ha funzionato solo perché il pulsante era in cima alla pagina.

Con il posizionamento fisso, i browser desktop funzionano perfettamente e sull'ipad si verifica qualcosa di interessante. Quando la pergamena del modale termina lo scorrimento della pagina inizia a funzionare ma con il modale sempre in alto ben posizionato.

Spero che questa domanda possa essere utile a qualcuno.