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

• JFK: check stackoverflow.com/a/14905953/1055987 if that helps
• MultiformeIngegno: This helped me stackoverflow.com/q/14905779. The fiddle in the "EDIT" field works perfectly. :)
• Cthulhu: @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.
• MultiformeIngegno: Yep, done. It's a shame on Chrome to behave like that BTW.. :(

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

• 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!
• 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')

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

• David Martins: Very nice improvement indeed. That solves the problem for the keyboard as well.