Javascript Mobile Swipe 只能使用一次答案

【问题标题】：Javascript Mobile Swipe only works onceJavascript Mobile Swipe 只能使用一次
【发布时间】：2018-05-23 18:22:22
【问题描述】：

我已经设法整理了一些 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

【问题讨论】：

element.classList.add(...) 不返回任何内容，因此您不能在其上调用.remove。使用browser console (dev tools)（点击F12）并阅读任何错误。
感谢您的帮助 Xufox，我现在让它向下滑动 + 向上，但它不会向下滑动第二次，我是否需要检查一下哪个幻灯片处于活动状态?我通过 css 属性使用了几个背景 div： .background:nth-child(2) { background: white; }

标签： javascript mobile swipe

【解决方案1】：

我设法创建了一些函数，以便在检查当前幻灯片后调用 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;  

};

【讨论】：