Ipad div contenuto non scorre quando si utilizza come popup

Question

Non riesco a risolvere questo problema: Ho un div che mostro e nascondo come un popup con jquery. Il contenuto è plug-in di commenti di Facebook. Questo è il codice:

<div id="popup"> 
    <div class="mask"> 
     <div class="fb-comments" data-href="http://www.example.com" data-num-posts="30" data-width="470" data-colorscheme="light"></div> 
    </div> 
</div> 

Questo è il CSS che ho finora:

#popup { 
position:absolute; 
left:0px; 
top:0px; 
width:512px; 
height:530px; 
background:url(../img/bg_popup.gif) repeat-x 0px 0px; 
display:none; 
overflow:hidden; 
z-index:110; 
} 

#popup .mask { 
margin:5px 0px 0px 10px; 
width:498px; 
height:475px; 
overflow-y: scroll; 
overflow-x: hidden; 
} 

sto posizionando la comparsa nel centro dello schermo con jQuery, e tutto funziona benissimo su tutti i browser . Viene visualizzato il popup e posso scorrere il contenuto.

Il problema è con Ipad Safari. Il div non scorre e ha già provato a usare lo scorrimento del webkit: scorrimento, ma non succede nulla.

Un'ultima cosa: se inizio con la visualizzazione div popup impostata su "block", lo scorrimento funziona, ma il contenuto appare in pezzi.

Qualche idea? Grazie!

Answer 1

Cambiare il cms .mask in altezza automaticamente e renderlo trascinabile utilizzando jQueryUI trascinabile sull'asse y. Il div #popup è overflow nascosto ed è la maschera "reale" in questo caso. In questo modo è possibile spostare l'immagine .mask div su/giù ma non sinistra/destra. Hai solo bisogno di matematica per la correzione, se l'utente sta scorrendo all'esterno del div #popup. Pertanto è necessario ascoltare l'evento stop. Funziona solo su touchscreen. Su un client desktop devi trascinare il div con un clic prima (ma con un piccolo codice puoi gestirlo).

Per un miglior supporto contatto con jQueryUI aggiungere jQuery UI Touch Punch

Esempio:

$('#popup .mask').draggable(
    axis:"y", 
    stop:function(event, ui){ 
     // If there's any correction required you can do here 
     // e.g. the overscroll like on iOS 
    } 
);