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).

check http://stackoverflow.com/a/14905953/1055987 if that helps — JFK, Sep 01 '13 at 23:26
This helped me http://stackoverflow.com/q/14905779. The fiddle in the "EDIT" field works perfectly. :) — MultiformeIngegno, Sep 02 '13 at 09:14
@MultiformeIngegno I'm having the exact same issue. Can you please post your correct solution as an answer? Your website now works perfectly on Chrome and IE, I wish to accomplish the same. Thanks. — Cthulhu, Oct 04 '13 at 10:40
Yep, done. It's a shame on Chrome to behave like that BTW.. :( — MultiformeIngegno, Oct 04 '13 at 12:34

score 13 · Accepted Answer · answered Oct 04 '13 at 12:33

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

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! — Yohn, Jul 27 '14 at 17:42
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')` — RienNeVaPlu͢s, Jun 20 '15 at 09:12

score 1 · Answer 2 · answered Jun 24 '14 at 08:37

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

Very nice improvement indeed. That solves the problem for the keyboard as well. — David Martins, May 01 '15 at 13:08

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

2 Answers2