Question

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

Here是我的网站（正如您所看到的，如果您使用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;
    }
});

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

2 个答案: