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

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

• javascript
• jquery
• scroll
• jquery-animate

• check stackoverflow.com/a/14905953/1055987 if that helps – JFK Commented Sep 1, 2013 at 23:26
• This helped me stackoverflow.com/q/14905779. The fiddle in the "EDIT" field works perfectly. :) – MultiformeIngegno Commented Sep 2, 2013 at 9: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 Commented Oct 4, 2013 at 10:40
• Yep, done. It's a shame on Chrome to behave like that BTW.. :( – MultiformeIngegno Commented Oct 4, 2013 at 12:34

2 Answers 2

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

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