JS : Event on ScrollDown and ScrollUp

Question

I currently have a animated sprite that walks when you press the left and right keys on the keyboard. What I would like to do is to make the sprite walk-right when you scroll down and walk left when you scroll up. I would also like to make the sprite stop walking when the user stops scrolling. Thanks in advance!

I tried using the $(window).scroll function with variables of current and lastscroll positions, but it didn't work.

function walk(e) {
    var keyCode = e.keyCode;
    if (keyCode === 39) {
        key.right = true;
    } else if (keyCode === 37) {
        key.left = true;
    }
    if (key.right === true) {
        trans += 0;
        translate();
        sprite.classList.remove('left');
        sprite.classList.add('right');
        sprite.classList.add('walk-right');
    } else if (key.left === true) {
        trans -= 0;
        translate();
        sprite.classList.remove('right');
        sprite.classList.add('left');
        sprite.classList.add('walk-left');
    }
}

function stop(e) {
    var keyCode = e.keyCode;
    if (keyCode === 39) {
        key.right = false;
    } else if (keyCode === 37) {
        key.left = false;
    }
    if (key.right === false) {
        sprite.classList.remove('walk-right');
    } if (key.left === false) {
        sprite.classList.remove('walk-left');
    }
}

Answer 1

Update:

Here's a better version; I merged the keyboard and scroll code into the same event for you:

if (document.addEventListener) {
    // IE9, Chrome, Safari, Opera
    document.addEventListener("mousewheel", walk, false);
    // Firefox
    document.addEventListener("DOMMouseScroll", walk, false);
}else{
    // IE 6/7/8
    document.attachEvent("onmousewheel", walk);
}

function walk(e) {
    var e = window.event || e; // old IE support

    if (e.keyCode) {
        //keyboard input
        if (e.keyCode === 39) {
            key.right = true;
        } else if (keyCode === 37) {
            key.left = true;
        }
    }else{
        //scroll input
        var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail)));

        if (delta == 1) {
            //walk right
            key.right = true;
            key.left = false;
        }else if (delta == -1) {
            //walk left
            key.left = true;
            key.right = false;
        }else{
            //stop
            key.left = false;
            key.right = false;
            sprite.classList.remove('walk-right');
            sprite.classList.remove('walk-left');
        }
    }

    if (key.right === true) {
        trans += 0;
        translate();
        sprite.classList.remove('left');
        sprite.classList.add('right');
        sprite.classList.add('walk-right');
    } else if (key.left === true) {
        trans -= 0;
        translate();
        sprite.classList.remove('right');
        sprite.classList.add('left');
        sprite.classList.add('walk-left');
    }
}

Previous answer:

Here you go:

if (document.addEventListener) {
    // IE9, Chrome, Safari, Opera
    document.addEventListener("mousewheel", scroll, false);
    // Firefox
    document.addEventListener("DOMMouseScroll", scroll, false);
}else{
    // IE 6/7/8
    document.attachEvent("onmousewheel", scroll);
}


function scroll(e) {
    var e = window.event || e; // old IE support
    var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail)));

    if (delta == 1) {
        //walk right
        key.right = true;
        key.left = false;
    }else if (delta == -1) {
        //walk left
        key.left = true;
        key.right = false;
    }else{
        //stop
        key.left = false;
        key.right = false;
        sprite.classList.remove('walk-right');
        sprite.classList.remove('walk-left');
    }

    if (key.right === true) {
        trans += 0;
        translate();
        sprite.classList.remove('left');
        sprite.classList.add('right');
        sprite.classList.add('walk-right');
    } else if (key.left === true) {
        trans -= 0;
        translate();
        sprite.classList.remove('right');
        sprite.classList.add('left');
        sprite.classList.add('walk-left');
    }
}

Answer 2

Use document.addEventListener instead:

var currentY = 0;
document.addEventListener('scroll', function(e){
   // some logic
   key.right = false;
   key.left = false;

   currentY < window.pageYOffset ?  key.right = true : key.left = true;
   currentY = window.pageYOffset;
})