私は単純なスワイパーギャラリーを作っています。ここではデフォルトのブラウザースクロールを隠して画像をスワイプする必要があります。私はスワイプロジックのためにjQueryとTouchSwipeプラグインを使用しています。これまで私はこのコードを書いています:https://jsfiddle.net/drbj6zk8/5/。私が取得することにより算出したコンテナを(追加した(div.swipe - div.swipeラッパー)とswiperは、これらの境界の外に出てはならないiOSはスワイパーギャラリーのコンテナ幅を無視します
$(関数(){
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)間の動作には一貫性がありません。それらのうち、私は違った、より重要なことに、壊れた行動を取っています(スライダーは同じではなく、もっと重要なのですか、スワイパー設定された境界を越えて行く)。
誰かが私が迷っていることを知っていますか、またはこれがiOSで動作するためのいくつかの特定の要件があるかどうかは誰ですか?