8

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

是我的网站(如您所见,如果您使用 Firefox 访问它,效果完全不同)。

4

2 回答 2

13

我用这个 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;
    }
});
于 2013-10-04T12:33:13.397 回答
1

我稍微修改了键盘的代码,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;
    }
});
于 2014-06-24T08:37:08.530 回答