jQuery TouchSwipe горизонтальная прокрутка продолжает собираться

Question

Я использую jQuery TouchSwipe для создания горизонтальных прокручиваемых div на мобильном сайте. Я настроил его так, чтобы div прокручивался влево или вправо, в зависимости от того, как вы прокручиваете. Моя проблема заключается в том, что вы перестали прокручивать и снова проведите пальцем по экрану. Когда вы переходите на прокрутку, div возвращается к началу. Очевидно, я хочу, чтобы div оставался там, где он есть, и прокручивал с этой позиции. Вот что я до сих пор.

$('#table_set').swipe({ 
    swipeStatus:swipe1, allowPageScroll:'horizontal' 
}); 
function swipe1(event, phase, direction, distance, duration){ 
    if(direction == 'left'{ 
    $(this).scrollLeft(distance); 
    }else{ 
    $(this).scrollLeft('-' + distance); 
    } 
} 

Я понимаю, почему это происходит в начале div. Каждый раз, когда вы касаетесь, duration равно 0. Я просто не знаю, какие следующие шаги. Любая помощь будет потрясающей. Благодаря!

Answer 1

Я создал демо-прокрутку. Я думаю, что проблема с переходом к началу div была связана с тем, что направление возвращает null, если был щелчок и без прокрутки.

Я избегал этого, выходя из обратного вызова, если направление null.

Я не уверен, зачем вам нужно прокручивать, потому что прокрутка работает с помощью touchSwipe.

Пожалуйста, найдите демо-версию ниже и здесь, по адресу jsFiddle.

var IMAGECOUNT = 10; 
 
var url = 'http://lorempixel.com/400/200'; 
 
var imgArr = []; 
 
var loadCounter = 10; 
 

 
var decCounter = function(){ 
 
    loadCounter--; 
 
    if (!loadCounter) $("#table_set").trigger('allImgLoaded'); 
 
}; 
 

 
$(function() { 
 
    var $table = $('#table_set'); 
 
    var img; 
 
    //init table set with dummy images 
 
    for(var i=0; i< IMAGECOUNT; i++){ 
 
     imgArr[i] = new Image(); 
 
     imgArr[i].src = url + '?' + (new Date()).getTime(); // add time to avoid caching 
 
     imgArr[i].onload = decCounter; 
 
    } 
 
    
 
    $("#table_set").on('allImgLoaded', function() { 
 
     //console.log(imgArr); 
 
     $table.append(imgArr); 
 
    }); 
 
}); 
 

 

 
$('#table_set').swipe({ 
 
    swipeStatus:swipe1, allowPageScroll:'horizontal' 
 
}); 
 
function swipe1(event, phase, direction, distance, duration){ 
 
    console.log('swiped!', direction, distance, duration); 
 
    if (direction === null) return; // no swipe 
 
    
 
    var curPos = $(this).scrollLeft(); 
 
    var newPos = curPos; 
 
    if(direction == 'left'){ 
 
     newPos += distance; 
 
    $(this).scrollLeft(newPos); 
 
    }else{ 
 
     newPos -= distance; 
 
    $(this).scrollLeft(newPos); 
 
    } 
 
}

#table_set { 
 
    height: 210px; 
 
    width: 100%; 
 
    overflow-x: scroll; 
 
    overflow-y: hidden; 
 
    white-space: nowrap; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.touchswipe/1.6.4/jquery.touchSwipe.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="table_set"> 
 
    
 
</div>