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

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