Chrome 和 IE：使用鼠标滚轮滚动时视差（jQuery 动画）不流畅答案

【问题标题】：Chrome and IE: parallax (jQuery animate) is not smooth when using mouse wheel to scrollChrome 和 IE：使用鼠标滚轮滚动时视差（jQuery 动画）不流畅
【发布时间】：2013-09-05 00:09:58
【问题描述】：

我为 jQuery 改编了 this 插件，为我的网站使用视差效果。问题是（即使在上面链接中的演示中）Chrome 和 IE 的滚动非常不流畅。只有当您按下鼠标中键并且滚动是连续的（而不是“逐步" 当您滚动鼠标滚轮时）。所以当你用鼠标滚轮滚动时，视差效果就彻底毁了。在 Firefox 中，即使使用鼠标滚轮滚动，滚动也是连续的。有没有办法在 IE 和 Chrome 中也有连续滚动（javascript？）。

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

【问题讨论】：

检查stackoverflow.com/a/14905953/1055987是否有帮助
这对我有帮助 stackoverflow.com/q/14905779。 “编辑”字段中的小提琴完美无缺。 :)
@MultiformeIngegno 我遇到了完全相同的问题。您能否发布正确的解决方案作为答案？您的网站现在可以在 Chrome 和 IE 上完美运行，我希望也能做到。谢谢。
是的，完成了。顺便说一句，Chrome 的行为是一种耻辱.. :(

标签： javascript jquery scroll jquery-animate

【解决方案1】：

我用这个 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;
    }
});

【讨论】：

这实际上解决了我在 chrome 中遇到的问题，但随后它搞砸了 firefox 哈哈。我必须把它放在if(chrome){} 声明中，但它仍然有帮助！
谢谢，这真的很有帮助！但是，我注意到使用大图像时有点滞后。它也没有Firefox的本地版本那么流畅。使用linear 转换时，这两个问题似乎都得到了解决：animate({...}, time, 'linear')

【解决方案2】：

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

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

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

【讨论】：

确实是非常好的改进。这也解决了键盘的问题。