Chrome and IE: parallax (jQuery animate) is not smooth when using mouse wheel to scroll

Question

I adapted this plugin for jQuery that uses the parallax effect for my website. Problem is (even in the demo in the link above) that Chrome and IE have a really NOT smooth scroll.. it only works well when you press the middle button on the mouse and the scroll is continuous (not "step-by-step" when you scroll the mouse wheel). So when you use the mouse wheel to scroll, the parallax effect is completely ruined. In Firefox instead the scroll is continous even when scrolling with the mouse wheel. Is there a way to have continous scrolling in IE and Chrome too (javascript?).

Here's my website (as you can see, if you visit it whit Firefox the effect is completely different).

Solution 1

I solved the problem with this jQuery script (which adds EventListener for both keyboard and mouse scroll), hope it helps. :)

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

var time = 1300;
var distance = 270;

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;
    }
});

Solution 2

I modified the code a little bit for keyboard and jerks are no longer coming in IE and Chrome.

http://jsfiddle.net/cZuym/247/

I just added e.preventDefault();

    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:
            e.preventDefault();
            $('html, body').stop().animate({
                scrollTop: $(window).scrollTop() - distance
            }, time);
            break;

            //down
        case 40:
            e.preventDefault();
            $('html, body').stop().animate({
                scrollTop: $(window).scrollTop() + distance
            }, time);
            break;
    }
});

Comments

[Yohn]

This actually fixed the issue I had in chrome, but then it messes up firefox lol. I gotta put this within a if(chrome){} statement, but it still helps!

[David Martins]

Very nice improvement indeed. That solves the problem for the keyboard as well.

[RienNeVaPlu͢s]

Thank you, this is really helpful! However, I noticed it's a bit laggy when using large images. It also didn't feel as smooth as the native one from firefox. Both problems seem to be fixed when using a linear transition: animate({...}, time, 'linear')