ポップアップとして使用するとIpad divのコンテンツがスクロールしない

Question

私はこの問題を解決できません： jqueryでポップアップとして表示および非表示にするdivがあります。内容はFacebookのコメントプラグインです。これはコードです：

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

これは、これまで私が持っているCSSです：

#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を使って、画面の中央にポップアップを配置していて、すべてがすべてのブラウザで素晴らしい作品。ポップアップが表示され、コンテンツをスクロールできます。

問題はIpad Safariにあります。 divはスクロールせず、すでにwebkit-overflow-scrolling：touchを使って試してみましたが、何も起こりません。

もう1つ：「ブロック」に設定されているポップアップdivの表示から始めると、スクロールは機能しますが、内容は部分的に表示されます。

アイデア？ありがとう！

Answer 1

.mask cssをautoに変更し、y軸上でjQueryUI draggableを使用してドラッグ可能にします。 #popup divはオーバーフロー隠しであり、この場合は「実際の」マスクです。 したがって、現在の.mask divを上下に移動できますが、左/右には移動できません。 ユーザーが#popup divの外をスクロールしている場合は、補正のための計算が必要です。それで停止イベントを聞く必要があります。 これはタッチスクリーンでのみ機能します。 デスクトップクライアントでは、前にクリックしてdivをドラッグする必要があります（ただし少しコードがあればこれを処理できます）。 jQueryUIとのより良いタッチをサポートするために

はjQuery UI Touch Punch

例を追加します。

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