6

この問題を解決できません。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 表示を「ブロック」に設定して開始すると、スクロールは機能しますが、コンテンツがばらばらに表示されます。

何か案は？ありがとう！

4

1 に答える 1

1

.mask css を height auto に変更し、y 軸でドラッグ可能な jQueryUI を使用してドラッグ可能にします。#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
    }
);
于 2012-11-30T00:35:19.413 に答える