javascriptjqueryaddeventlistenereasingjquery-easing

Integrate easing on mouse wheel with arrows


I use this script to "fix" the problem of IE and Chrome not having a continous smooth scroll when using mouse wheel:

if (window.addEventListener) window.addEventListener('DOMMouseScroll', wheel, false);
window.onmousewheel = document.onmousewheel = wheel;

function wheel(event) {
    var delta = 0;
    if (event.wheelDelta) delta = event.wheelDelta / 120;
    else if (event.detail) delta = -event.detail / 3;

    handle(delta);
    if (event.preventDefault) event.preventDefault();
    event.returnValue = false;
}

function handle(delta) {
    var time = 1000;
    var distance = 260;

    $('html, body').stop().animate({
        scrollTop: $(window).scrollTop() - (distance * delta)
    }, time );
}

(JSFIDDLE)

What I'd like to have is integrate also the arrow keys in this. How do I rewrite this script adding the eventListener of arrow keys "scrolling" and applying the easing?


Solution

  • Living demo: http://jsfiddle.net/cZuym/39/

    You just have to play with the keydown event and the animation of the scroll. Note that now the variables time and distance are globals:

    if (window.addEventListener) window.addEventListener('DOMMouseScroll', wheel, false);
    window.onmousewheel = document.onmousewheel = wheel;
    
    var time = 1000;
    var distance = 300;
    
    function wheel(event) {
        if (event.wheelDelta) delta = event.wheelDelta / 120;
        else if (event.detail) delta = -event.detail / 3;
    
        handle();
        if (event.preventDefault) event.preventDefault();
        event.returnValue = false;
    }
    
    function handle() {
    
        $('html, body').stop().animate({
            scrollTop: $(window).scrollTop() - (distance * delta)
        }, time);
    }
    
    
    $(document).keydown(function (e) {
    
        switch (e.which) {
            //up
            case 38:
                $('html, body').stop().animate({
                    scrollTop: $(window).scrollTop() - distance
                }, time);
                break;
    
                //down
            case 40:
                $('html, body').stop().animate({
                    scrollTop: $(window).scrollTop() + distance
                }, time);
                break;
        }
    });