is there a "touchmoveDelta" → how do I modifie my mousewheel code for touch?

Question

Okay, hey there again!

I am following a tutorial I found here (sorry don't have the link right now, but AWESOME it works!):

$(document).ready(function () {
        var divs = $('.mydiv');
        var dir = 'up'; // wheel scroll direction
        var div = 0; // current div

        var running = false;
        $(document.body).on('DOMMouseScroll mousewheel', function (e) {
            if (running) {
                return false;
            }

            running = true;
            setTimeout(function() {
                running = false;
            }, 2000);

            if (e.originalEvent.detail > 0 || e.originalEvent.wheelDelta < 0) {
                dir = 'down';
            } else {
                dir = 'up';
            }
            // find currently visible div :
            div = -1;
            divs.each(function(i){
                if (div<0 && ($(this).offset().top >= $(window).scrollTop())) {
                    div = i;
                }
            });
            if (dir == 'up' && div > 0) {
                div--;
            }
            if (dir == 'down' && div < divs.length) {
                div++;
            }
            //console.log(div, dir, divs.length);
            $('html,body').stop().animate({
                scrollTop: divs.eq(div).offset().top
            }, 1500);



            return false;
        });
        $(window).resize(function () {
            $('html,body').scrollTop(divs.eq(div).offset().top);
    });
});

Right now I am trying to get this working for touch inputs (iPhones and such). I did change

    $(document.body).on('DOMMouseScroll mousewheel', function (e) {

to

    $(document.body).on('touchmove', function (e) {

which worked like a charm, but it only scrolls up. I am aware that the code is written that way:

        if (e.originalEvent.detail > 0 || e.originalEvent.wheelDelta < 0) {
            dir = 'down';
        } else {
            dir = 'up';
        }

So my question is: How do I modify the short code above to determine the direction up / down on touchmove inputs? As far as I can see its only this line

        if (e.originalEvent.detail > 0 || e.originalEvent.wheelDelta < 0) {

which needs to be changed but I dont know how.

Answer 1

There's unfortunately no convenient way to determine the delta of a touch 'pan'. What you'll need to do is store the initial touch location on ontouchstart, and then on ontouchmove compare the current touch location to the starting location (specifically the y component in this instance) to calculate the delta and determine if the user dragged up or down.

$("#myElement").on("touchstart", function(e) {
    var startingY = e.originalEvent.touches[0].pageY;

    $("#myElement").on("touchmove", function(e) {
        currentY = e.originalEvent.touches[0].pageY;
        var delta = currentY - startingY;
    });
});

In the above example delta would be the distance panned, updated every time touchmove is fired. Also, don't forget to unbind touchmove on touchend.