Zawartość div iPada nie przewija się podczas korzystania z wyskakujących okienek.

Question

Nie mogę rozwiązać tego problemu: Mam element div, który pokazuję i ukrywam jako popup z jquery. Treść to wtyczka komentarzy do Facebooka. Jest to kod:

<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> 

to jest CSS mam tak daleko:

#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; 
} 

mam pozycjonowanie okienko w środku ekranu z jQuery, i wszystko działa świetnie na wszystkich przeglądarkach . Pojawi się popup i mogę przewijać zawartość.

Problem dotyczy przeglądarki Ipad Safari. Element div nie przewija i już próbował użyć przewijania z użyciem webkita: dotknięcie, ale nic się nie dzieje.

Jeszcze jedno: jeśli zaczynam od wyskakującego okienka graficznego ustawionego na "blok", przewijanie działa, ale treść pojawia się w kawałkach.

Wszelkie pomysły? Dzięki!

Answer 1

Zmień .maska ​​css na wysokość automatyczną i ustaw ją jako przeciągalną za pomocą jQueryUI przeciąganego na osi Y. Element div #popup jest ukryty i jest "prawdziwą" maską w tym przypadku. Możesz przesuwać bieżącą .maskę div w górę/w dół, ale nie w lewo/w prawo. Po prostu potrzebujesz trochę matematyki do korekty, jeśli użytkownik przewija się poza div #popup. Dlatego musisz nasłuchiwać na zdarzeniu stop. Działa to tylko na ekranach dotykowych. Na kliencie biurkowym musisz przeciągnąć element div przez kliknięcie przed (ale z małym kodem bitowym możesz sobie z tym poradzić).

uzyskać lepsze wsparcie dotykowy jQueryUI dodać jQuery UI Touch Punch

Przykład:

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