Question

我已经设法将一些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

Answer 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;  

};

Javascript Mobile Swipe仅适用一次

1 个答案: