2

iOS6 Mobile Safariでdiv内の画像を水平にスクロールするjavascript touchmoveイベントリスナーを備えたdivがあります。ページの垂直スクロールがブラウザーにバブルアップできるようにしたいのですが、これが発生すると、jQuery.animate が機能しなくなります。

https://gist.github.com/4047733で問題を示すコードの簡略化されたバージョンを投稿しました

問題を再現するために私が取る手順は次のとおりです。

  • 画像を左右にスワイプして、アニメーションが左端に戻る様子に注目してください
  • 写真をタッチしてページを上下にスクロール
  • 左右のスワイプを繰り返しますが、画像がアニメーション化されて左端に戻らないことに注意してください。e.preventDefaultなしでtouchmoveが発生した後、jQuery animateが失敗するようです

これは、上記の要点リンクから準備ができている jQuery ドキュメント内の JavaScript です。

var el = document.getElementById("swipebox"),
    $slider = $('#swipebox').find('img'),
    startX, startY, dx, dy,
    startLeft,
    animateH = false,
    animateV = false;

var onTouchStart = function(e) {
    startLeft = parseInt($slider.css('left'), 10) || 0;
    startX = e.touches[0].pageX;
    startY = e.touches[0].pageY;

};
var onTouchMove = function(e) {
    dx = e.touches[0].pageX - startX;
    dy = e.touches[0].pageY - startY;

    if (
        animateH || 
        (!animateV && Math.abs(dx) > 5) 
    ) {
        // prevent default, we are scrolling horizontally, 
        animateH = true;
        $slider.stop().css({'left': startLeft+dx*2});
        e.preventDefault();
    } else if (Math.abs(dy) > 5) {
        // do NOT prevent default, we are scrolling the page vertically
        animateV = true;
    } else {
        // direction of scroll is undetermined at this time
        // we've moved less than 5px in any direction
        e.preventDefault();
    }
    return false;
};
var onTouchEnd = function(e) {
    $slider.stop().animate({'left': 0}); // animate image back to left
    e.preventDefault();
    animateH = false;
    animateV = false;
};

var onTouchCancel = function(e) {
    console.log('onTouchCancel');
};

el.addEventListener('touchstart', onTouchStart, false);
el.addEventListener('touchmove', onTouchMove, false);
el.addEventListener('touchend', onTouchEnd, false);
el.addEventListener("touchcancel", onTouchCancel, false);

どんな洞察も大歓迎です。

4

1 に答える 1

2

これは iOS6 のバグです。iOS6 でウィンドウをスクロールすると、jQuery アニメーション タイマーが失敗します。現在、これにはいくつかの回避策があります。

  1. 誰かがしたように、独自のタイマー関数を作成します: https://gist.github.com/3755461
  2. jQuery.animate の代わりに CSS3 トランジションを使用します。これは好ましい方法です - css3 トランジションにはそのような問題はありません。この jquery プラグインhttp://ricostacruz.com/jquery.transit/を使用して、JavaScript で CSS トランジションを簡単に操作できます。
于 2012-11-09T21:06:07.597 に答える