Chrome和IE:使用鼠标滚轮滚动时,视差(jQuery动画)不流畅

Question

我为jQuery 改编了这个插件,它为我的网站使用了视差效果.问题是(即使在上面的链接中的演示中)Chrome和IE有一个非常平滑的滚动...它只有在你按下鼠标中间按钮并且滚动是连续的时才能很好地工作(不是"一步一步" "滚动鼠标滚轮时".因此,当您使用鼠标滚轮滚动时,视差效果会完全毁掉.在Firefox中,即使使用鼠标滚轮滚动,滚动仍然是连续的.有没有办法在IE和Chrome中连续滚动(javascript？).

这是我的网站(正如你所看到的,如果你使用Firefox访问它,效果会完全不同).

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