0

Phonegap /Cordovaで構築されたJQTouchiPhoneアプリケーションでiScroll4（cubiq.org/iscroll-4）を使用しています。

私の問題は、水平スクロールは「hScroll：true」ですが、画像をズームインおよびズームアウトするまで有効にならず、すべてが正常に機能することです（iScrollが機能し、ラッパー/スクローラーのCSSが正しいことを確認します）。

HTML：

<div id="wrapper">
    <div id="scroller"></div>  // Also tried with img-tag in div instead of as bg
</div>

CSS：

#wrapper {
position:absolute;
top:45px; bottom:0; left:0; // 45px is header
z-index:1;
width:100%; // Also tried with window size (320)
overflow:auto; // Also tried with scroll
}

#scroller {
position:absolute; z-index:1;
width: 1024px; // The size of my image
height: 414px; // The height of my image
background: url(img/test.png) no-repeat;
padding: 0;
}

JAVASCRIPT：

var myScroll;
function loaded() {
    myScroll = new iScroll('wrapper', {
                             hScrollbar: true,
                             vScrollbar: true,
                             hScroll: true,
                             vScroll: true,
                             zoom: true
                             });
}

「vScroll」と「zoom」のパラメータを変更すると、すぐに目的の効果が得られます。水平スクロールに関連するパラメータは、ズームが実行されるまで何もしません。

ロード後にラッパーを更新するか、座標にスクロールして、アプリのロード順序を編集しようとしましたが、何も役に立ちません。

アンドレアス、お時間をいただきありがとうございます。

4

3 に答える 3

0

ズームまたはウィンドウのサイズが変更されるまで画像要素がまったくスクロールしないことを除いて、同様の問題がありました。この問題は、DOM の更新に関連していることが判明しました。当時非表示だった要素にスクローラーを作成していました。後で表示されるようになったとき、スクロールが機能していませんでした。スクローラーを表示してから更新する必要がありました。

ここで詳細情報を見つけることができます: http://iscrolljs.com/#refresh

コード例:

ajax('page.php', onCompletion);

function onCompletion () {
    // Update here your DOM

    setTimeout(function () {
        myScroll.refresh();
    }, 0);
};
于 2014-01-30T04:15:52.167 に答える
0

hScroll オプションを手動で有効にする必要があります。

ズームする必要がある各 div に、次のコードを含めます。

data-iscroll='{"zoom":true, "hScroll":true }'
于 2012-08-07T18:55:16.930 に答える
0

毎回、ラッパーの div 幅がスクローラーの div 幅よりも小さいことが原因である可能性があります。

于 2012-08-31T09:18:34.823 に答える