Javascript Mobile Swipe работает только один раз - PullRequest
Новая
       17

Javascript Mobile Swipe работает только один раз

0 голосов
/ 23 мая 2018

Мне удалось собрать некоторый код Javascript для проверки мобильной прокрутки, первый экземпляр «прокрутки вниз» работает нормально, однако я не могу прокрутить назад или прокрутить второй раз.

Я пытался найти заархивированные ответы, но не смог ничего найти, мой код: 

window.addEventListener('touchstart', handleTouchStart, false);        
window.addEventListener('touchmove', handleTouchMove, false);

var xDown = null;                                                        
var yDown = null;                                                        

function handleTouchStart(evt) {                                         
xDown = evt.touches[0].clientX;                                      
yDown = evt.touches[0].clientY;                                      
};                                                

function handleTouchMove(evt) {

if ( ! xDown || ! yDown ) {
    return;
}

var xUp = evt.touches[0].clientX;                                    
var yUp = evt.touches[0].clientY;

var xDiff = xDown - xUp;
var yDiff = yDown - yUp;

if ( Math.abs( xDiff ) > Math.abs( yDiff ) ) {/*most significant*/
    if ( xDiff > 0 ) {

        /* left swipe */ 


    } else {
        /* right swipe */

    }                       
} else {
    if ( yDiff > 0 ) {

    var element = document.getElementById("background");
    element.classList.add("down-scroll").remove("up-scroll");


    } else { 
    var element = document.getElementById("background");
    element.classList.add("up-scroll").remove("down-scroll");           

    }                                                                 
}
/* reset values */
xDown = null;
yDown = null;  

};

Живой пример: http://peakwebdesigns.co.uk/work/greaves-sports/world-cup

1 Ответ

0 голосов
/ 23 мая 2018

Мне удалось создать некоторые функции, позволяющие вызывать nextSlide и previousSlide после проверки текущего слайда: 

// ------------- SLIDE MOTION ON MOBILE ------------- //

window.addEventListener('touchstart', handleTouchStart, false);        
window.addEventListener('touchmove', handleTouchMove, false);

var xDown = null;                                                        
var yDown = null;                                                        

function handleTouchStart(evt) {                                         
xDown = evt.touches[0].clientX;                                      
yDown = evt.touches[0].clientY;                                      
};                                                

function handleTouchMove(evt) {

// ------------- SLIDE MOTION ------------- //
function nextItem() {
currentSlideNumber++;
var $previousSlide = $(".background").eq(currentSlideNumber - 1);
$previousSlide.removeClass("up-scroll").addClass("down-scroll");
}

function previousItem() {
currentSlideNumber--;
var $currentSlide = $(".background").eq(currentSlideNumber);
$currentSlide.removeClass("down-scroll").addClass("up-scroll");
}

if ( ! xDown || ! yDown ) {
    return;
}

var xUp = evt.touches[0].clientX;                                    
var yUp = evt.touches[0].clientY;

var xDiff = xDown - xUp;
var yDiff = yDown - yUp;

if ( Math.abs( xDiff ) > Math.abs( yDiff ) ) {/*most significant*/
    if ( xDiff > 0 ) {

        /* left swipe */ 


    } else {
        /* right swipe */

    }                       
} else {
    if ( yDiff > 0 ) {


   nextItem();


    } else { 

    previousItem();

    }                                                                 
}
/* reset values */
xDown = null;
yDown = null;  

};
...