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

我为jQuery改编了插件，该插件在我的网站上使用了视差效果。 问题是（甚至在上面链接的演示中）Chrome和IE的滚动非常不平滑。。只有当您按下鼠标中键并且滚动是连续的（而不是滚动鼠标滚轮时的“一步一步”）时，它才能正常工作。因此，当你使用鼠标滚轮滚动时，视差效果完全被破坏了。在Firefox中，即使使用鼠标滚轮滚动，滚动也是连续的。有没有办法在IE和Chrome（javascript？）中实现连续滚动

---

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

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

---

我为键盘修改了一点代码，IE和Chrome中不再出现混蛋

我刚刚添加了e.preventDefault（）

---

看看这是否对我有帮助。“编辑”字段中的小提琴工作正常。：）@不，我也有同样的问题。你能把你的正确答案贴出来吗？你的网站现在可以在Chrome和IE上完美运行，我也希望能做到这一点。谢谢。是的，完成了。对Chrome来说，这样的行为真是太可惜了…：（这实际上修复了我在chrome中遇到的问题，但是它把firefox搞糟了lol。我必须把它放在

if（chrome）{}

语句，但它仍然有帮助！谢谢，这真的很有帮助！但是，我注意到在使用大图像时它有点滞后。它也没有firefox的原生图像平滑。使用

线性转换时，这两个问题似乎都得到了解决：
动画（{…}，时间，'linear'））
确实是非常好的改进。这也解决了键盘的问题。
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;
    }
});

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