javascript Chrome 和 IE：使用鼠标滚轮滚动时视差（jQuery 动画）不平滑

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

提问by MultiformeIngegno

I adapted thisplugin 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?).

我为 jQuery修改了这个插件，它为我的网站使用了视差效果。问题是（即使在上面链接中的演示中）Chrome 和 IE 的滚动非常不流畅。 "当您滚动鼠标滚轮时）。所以当你用鼠标滚轮滚动时，视差效果就完全毁了。在 Firefox 中，即使使用鼠标滚轮滚动，滚动也是连续的。有没有办法在 IE 和 Chrome 中连续滚动（javascript？）。

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

这是我的网站（如您所见，如果您使用 Firefox 访问它，效果完全不同）。

回答by MultiformeIngegno

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

我用这个 jQuery 脚本解决了这个问题（它为键盘和鼠标滚动添加了 EventListener），希望它有所帮助。:)

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

回答by Ravi Sagar

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

我稍微修改了键盘的代码，IE 和 Chrome 中不再出现混蛋。

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

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

I just added e.preventDefault();

我刚刚添加了 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;
    }
});