4

iPad で表示すると、Colorbox の iframe コンテンツがスクロールしません。以下をお読みください。

https://github.com/jackmoore/colorbox/issues/41#issuecomment-5244379

Ipad からカラーボックスに設定されたサイズよりも大きい Web ページを表示すると、スクロール機能が無効になるか、または存在しません。

1 本指または 2 本指でのスクロールを提案する人もいますが、これは機能しません。

前提条件: iPad を所有しているか、地元のベストバイに行く

再現手順: http://colorpowered.com/colorbox/core/example1/index.htmlに移動し、 [外部 Web ページ (Iframe)] リンクをクリックし、Google 検索に何かを入力します。

結果: 結果をスクロールできません。

これに対する修正はありますか？この問題を解決するための作業はありますか? ところで、これは IE、Chrome、および Firefox で正常に動作します。

体はこれを回避しましたか??? どんな助けでも大歓迎です。

4

3 に答える 3

6

更新 - 著者による修正済みの問題

ジャックは今日 (2013 年 2 月 4 日) にこの問題を修正したようです。彼のGithubページから最新リリースを取得する価値があります。

前の解決策

OK、jScrollPane を正しく動作させることができませんでした。そうしないと言っているわけではありませんが、カスタムのサイズ変更を使用して iframe のサイズを変更していましたが、jScrollPane の寸法計算ではうまく機能していなかったと思います。

解決

しかし、スタックオーバーフローのSharonのおかげで、より一般的な iOS iframe スクロールの問題の解決策のおかげで、なんとか機能させることができました。カラーボックスでよりうまくプレイするために、彼女のコードにいくつかの調整を加えました。これは、iframe コンテンツを制御する場合にのみ機能することに注意してください。

次のコードを iframe に挿入するだけです。

setTimeout(function () {
    var startY = 0;
    var startX = 0;
    var b = document.body;
    b.addEventListener('touchstart', function (event) {
        startY = event.targetTouches[0].screenY;
        startX = event.targetTouches[0].screenX;
    });
    b.addEventListener('touchmove', function (event) {
        event.preventDefault();
        var posy = event.targetTouches[0].screenY;
        var h = parent.document.getElementById("cboxLoadedContent");
        var sty = h.scrollTop;

        var posx = event.targetTouches[0].screenX;
        var stx = h.scrollLeft;
        h.scrollTop = sty - (posy - startY);
        h.scrollLeft = stx - (posx - startX);
        startY = posy;
        startX = posx;
    });
}, 1000);

スクロールはぎくしゃくしませんが、ネイティブ スクロールのように徐々に減速することはなく、指を離すと停止するだけです。さらに、スクロールバーはありません。それ以外は完璧なソリューションです。

Sharon のソリューションを含むページは、iframe を制御しないシナリオを試すための代替手段を提供します。

于 2012-07-06T12:13:11.683 に答える
1

私はちょうどこれをしました、私の一般的なcssで私は追加しました#cboxLoadedContent{-webkit-overflow-scrolling: touch;}

次に、colorboxで開いたビューで、cssに次のスタイルを追加しましたbody{-webkit-transform:translate3d(0, 0, 0);}

これはiPadとiPhoneで動作します。

于 2013-01-22T11:32:24.307 に答える
0

自分のiframeコンテンツを管理していますか、それとも外部のWebサイト、つまり別のドメインのコンテンツですか？後者の場合、私は助けることができません。

iframeコンテンツを管理している場合は、jScrollPaneプラグインを使用して問題を解決できます。

iframeの本体にはCSSoverflow：autoが必要であり、iframeコンテンツの周りにdivをラップする必要があります。iframe内で準備ができたら、iframeウィンドウの高さを取得し、ラッパーdivのcssの高さをウィンドウの高さ（または少しだけ低く）に設定してから、jScrollPaneをラッパーdivに適用します。

$(document).ready(function() {
    var $container = $("#myDiv");
    var $win = $(window);

    if ($container.height() >= $win.height()){
        $container.css({
            'width': $win.width(),
            'height': $win.height()
        });

        $container.jScrollPane();
    }
});
于 2012-06-27T16:16:16.287 に答える