javascript - iOS 忽略 Swiper 画廊的容器宽度

Question

我正在制作一个简化的滑动器画廊，我只需要它来隐藏默认的浏览器滚动条并滑动浏览图像。我正在使用 jQuery 和 TouchSwipe 插件来实现滑动逻辑。到目前为止，我已经编写了这段代码:https://jsfiddle.net/drbj6zk8/5/ .我添加了容器(通过获取 (div.swipe - div.swipe-wrapper) 计算)并且滑动器不应超出这些边界。

$(函数() {

var currentTranslation = 0;
var lastDistance = 0;
var translationDelta = 0;
var containerLengthArr = $('div.swipe-slide');
var containerLength = 0;
var containerBorder = 0;

$("#test5").swipe({
    swipeStatus: swipe2,
    allowPageScroll: "horizontal"
});
/*TODO*/

$.each(containerLengthArr, function(e) {
    containerLength += ($(this).width() + 10);
})
$('.swipe-wrapper').width(containerLength + 5);
containerBorder = $('.swipe').width() - $('.swipe-wrapper').width();
console.log(containerBorder);

//Swipe handlers

function swipe2(event, phase, direction, distance) {
    var check = $(this).children('.swipe-slide');
    if (phase == "end") {
        translationDelta = 0;
    } else {
        translationDelta = lastDistance - distance;
    }
    /*Check direction*/
    if (direction == "right") {
        currentTranslation -= translationDelta;
    } else if (direction == "left") {
        currentTranslation += translationDelta;
    }
    var distance2 = 0;
    /*Limit slider to wrapper lenghth*/
    if (currentTranslation > 0) {
        distance2 = "translateX(" + 0 + "px)";
        currentTranslation = 0;
    }
    else if (currentTranslation < containerBorder) {
        distance2 = "translateX(" + containerBorder + "px)";
        currentTranslation = containerBorder;
    }
    else {
        distance2 = "translateX(" + currentTranslation + "px)";
    }

    check.css('transform', distance2);
    lastDistance = distance;

    console.log(currentTranslation);
}

});

当然，在桌面浏览器和 Android 设备上一切正常，但我在 iOS 设备上遇到了问题。不同设备(iphone 5、iphone 6、iPad)的行为绝对不一致。在所有这些上，我都得到了不同的，更重要的是 splinter 的行为( slider 看起来不一样，更重要的是，滑动器超出了设定的边界)。

有谁知道我遗漏了什么，或者是否有一些特定要求才能在 iOS 上运行？

Answer 1

我做了更多的挖掘，结果发现这是 jquery 插件的错误。它不能正确地“读取”iOS 上的距离。提供的解决方法是降级到版本 1.6.9 或编辑插件。

引用:https://github.com/mattbryson/TouchSwipe-Jquery-Plugin/issues/260