iOS6 JavaScript touchmove事件后通过垂直滚动jquery动画不会触发

我有一个JavaScript touchmove事件侦听器的div，在iOS6 Mobile Safari上水平滚动div内的图像。我希望允许页面垂直滚动，以便向浏览器发起泡泡，但当发生这种情况时，jQuery.animate不再有效。iOS6 JavaScript touchmove事件后通过垂直滚动jquery动画不会触发

我已经发布的代码的简化版本，表明在 https://gist.github.com/4047733

我拿重现问题的步骤问题是：左

刷卡图片/右，并注意如何动画回到左边
触摸图片并向上/向下滚动页面
重复向左/向右滑动并注意图片不会回到左边缘。它出现touchmove发生在没有e.preventDefault

这里是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);

任何了解将不胜感激jQuery的动画失败。

来源

2012-11-09 mdlas

这是iOS6中的错误。在iOS6中滚动窗口时，jQuery动画定时器失败。目前，有这个几个解决方法：

创建您自己的计时器功能，如有人做：https://gist.github.com/3755461
使用CSS3过渡，而不是jQuery.animate的。这是优先的方式 - css3转换没有这样的问题。你可以使用这个jquery插件http://ricostacruz.com/jquery.transit/来轻松操纵JavaScript中的CSS转换。

来源

2012-11-09 21:06:07 Inferpse

谢谢。计时器功能在https://gist.github.com/3755461完美运行。我在自己和事情正常工作之前添加了要点。 – mdlas

iOS6 JavaScript touchmove事件后通过垂直滚动jquery动画不会触发

回答

相关问题