iOS6 JavaScript touchmove事件在jQuery animate之后不会通过垂直滚动传递 [英] iOS6 JavaScript touchmove event pass through vertical scroll afterwards jQuery animate does not fire

问题描述

我有一个带有javascript touchmove事件侦听器的div，可在iOS6 Mobile Safari上水平滚动div内的图像.我想允许页面的垂直滚动冒泡到浏览器，但是当发生这种情况时，jQuery.animate不再起作用.

I have a div with a javascript touchmove event listener that scrolls the image inside the div horizontally on iOS6 Mobile Safari. I'd like allow vertical scrolling of the page to bubble up to the browser but when this occurs, jQuery.animate no longer works.

我已经发布了简化版的代码，以演示该问题. https://gist.github.com/4047733

I've posted a simplified version of the code that demonstrates the problem at https://gist.github.com/4047733

我要重新创建问题的步骤是:

The steps I take to recreate the problem are:

• 向左/向右滑动图片，并注意它如何动画回到左边缘
• 触摸图片并向上/向下滚动页面
• 重复向左/向右滑动，并注意图片没有动画回到左边缘.在没有e.preventDefault的情况下，发生触摸移动后，jQuery动画似乎失败了

这是从上面的gist链接准备好的jQuery文档中的javascript

Here is the javascript inside jQuery document ready from the gist link above

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);

任何见识将不胜感激.

推荐答案

这是iOS6中的错误.在iOS6中滚动窗口时，jQuery动画计时器失败. 当前，对此的解决方法很少:

This is bug in iOS6. jQuery animate timers fail when scrolling window in iOS6. Currently there are few workarounds on this:

1. 像其他人一样创建自己的计时器函数: https://gist.github.com/3755461
2. 使用CSS3过渡而不是jQuery.animate.这是首选方式-css3过渡不存在此类问题.您可以使用此jquery插件 http://ricostacruz.com/jquery.transit/轻松操作CSS JavaScript中的过渡.

1. Create your own timer functions like someone did: https://gist.github.com/3755461
2. Use CSS3 transition instead of jQuery.animate. This is preffered way - css3 transitions doesn't have such problem. You can use this jquery plugin http://ricostacruz.com/jquery.transit/ to easily manipulate CSS transitions in JavaScript.

这篇关于iOS6 JavaScript touchmove事件在jQuery animate之后不会通过垂直滚动传递的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！