8

このプラグインを、視差効果を使用する Web サイトの jQueryに適合させました。問題は (上記のリンクのデモでも) Chrome と IE のスクロールが本当にスムーズではないことです..マウスの中央ボタンを押してスクロールが連続している場合にのみうまく機能します (「ステップバイステップ」ではありません)。 " マウス ホイールをスクロールしたとき)。そのため、マウス ホイールを使用してスクロールすると、視差効果が完全に失われます。代わりに Firefox では、マウス ホイールでスクロールしてもスクロールが連続します。IE と Chrome でも継続的にスクロールする方法はありますか (javascript?)。

これが私の Web サイトです (ご覧のとおり、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 に答える