Ipad div içeriği, popup olarak kullanıldığında kaydırma yapmıyor

Question

Bu sorunu çözemiyorum: JQuery ile bir pop-up olarak gösterdiğim ve gizlediğim bir div var. İçerik facebook'un yorum eklentisidir.

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

jquery ile ekranın ortasında açılır pencere konumlandırma ediyorum ve her şey tüm tarayıcılarda harika çalışır:

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

Bu CSS var bugüne kadar geçerli: Bu kodudur . Popup belirir ve içeriği kaydırabilirim.

Sorun Ipad Safari ile ilgilidir. Div kaydırmaz ve webkit-overflow-scrolling kullanarak zaten denendi: dokunma, ama hiçbir şey olmuyor.

Bir şey daha: Eğer popup div ekranı "blok" olarak ayarlı olarak başlarsam, kaydırma çalışır, ancak içerik parçalarda görünür.

Herhangi bir fikrin var mı? Teşekkürler!

Answer 1

.mask css öğesinin yüksekliğini otomatik olarak değiştirin ve y-ekseninde sürüklenebilen jQueryUI öğesini kullanarak sürükleyin. #popup div taşması gizlidir ve bu durumda "gerçek" maskedir. Böylece, geçerli .mask div öğesini yukarı/aşağı, ancak sola/sağa taşıyabilirsiniz. Eğer kullanıcı #popup div'in dışına çıkıyorsa, düzeltme için biraz matematiğe ihtiyacınız var. Bu nedenle, durdurma olayını dinlemeniz gerekir. Bu yalnızca dokunmatik ekranlarda çalışıyor. Bir masaüstü istemcisinde, daha önce tıklatarak div'i sürüklemeniz gerekir (ancak küçük bir kodla bunun üstesinden gelebilirsiniz).

jQueryUI daha dokunma desteği jQuery UI Touch Punch

Örnek ekleyin:

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