2

私がまだ何をしたかを確認してくださいhttp://jsfiddle.net/dUVmh/1/。

私が達成したいアニメーションについては、次のとおりです。

最初にページを下にスクロールすると、ウィンドウが #green DIV までスクロールします。その後、再度ウィンドウを下にスクロールすると、 #yellow DIV までスクロールし、スクロールアップ時にも同じになります (#yellow から #green へ)。

問題について: #green DIV でスタックしているアニメーションを確認できます。

$(window).scroll(function(){
    if($(this).scrollTop() > 0) {
        $("html, body").animate({ scrollTop: $('#green').offset().top }, 1000);
    }
    else if($(this).scrollTop() > 1000) {
        $("html, body").animate({ scrollTop: $('#yellow').offset().top }, 1000);
    }
    else{
         $("html, body").animate({ scrollTop: $('#red').offset().top }, 1000);
    }

});

私はJSの経験があまりありませんでした。

ありがとうございます:)

4

2 に答える 2

4

これは取り組むのが楽しい問題でした。

このソリューションは、div を配列に配置し、最後にスクロールした要素の配列インデックスを記憶します。スクロール イベントがトリガーされると、新しい scrollTop が現在の div の上部オフセットの上または下にあるかどうかがチェックされ、それに応じて配列内の次または前の div に移動します。

このソリューションでは、多くの div を使用できます。高速にスクロールしたときに発生するちらつきを取り除こうとしましたが、それを行う唯一の方法は、アニメーション中にスクロールバーを無効にすることだと思います.

http://jsfiddle.net/dUVmh/35/

$(function() {
    var divs = [],
        body = $('body, html'),
        currentDiv = 0,
        timeout;

    $('div').each(function() {
        divs.push($(this));
    });

    // we only need to capture the first scroll event triggered and then
    // add another listener once we have done our animation
    var scrollListen = function() {
        $(window).one('scroll', function() {
            doScroll($(this).scrollTop());
        });
    };

    // Without the timeout, the scroll event would be triggered again too soon
    var scrollEnd = function() {
        clearTimeout(timeout);
        timeout = setTimeout(function() {
            scrollListen();
        }, 10);
    };

    // checks if the scroll direction was up and down and animates
    // the body scrollTop to the next or previous div
    var doScroll = function(scrollTop) {
        var direction = scrollTop - divs[currentDiv].offset().top;

        if (direction > 0 && currentDiv + 1 < divs.length) {
            nextDiv = currentDiv + 1;
        } else if (currentDiv - 1 > -1) {
            nextDiv = currentDiv - 1;
        }

        if (currentDiv === nextDiv) {
            scrollEnd();
        }

        body.animate({
            scrollTop: divs[nextDiv].offset().top
        }, 1000, function() {
            currentDiv = nextDiv;
            scrollEnd();
        });
    };

    scrollListen();
});

編集: Firefox の scrollTop は、本文ではなく html で変更する必要があります。また、firefox が一度に複数回 scrollListen を呼び出す際の問題も修正されました。

于 2013-01-01T12:46:30.020 に答える
1

問題は、アニメーションを jQuery で$(window).scroll(function())スクロールするときに が何度も呼び出されることです。ScrollTop

現在スクロールしているかどうかを確認し、ScrollTopアニメーションを1回だけ実行する解決策を次に示します。

http://jsfiddle.net/dUVmh/29/

補足: ユーザーがスクロールしている方向 (上または下) を確認し、それに応じて、次の div を上または下にスクロールすることをお勧めします。
最後の scrollTop 位置を保存し、現在の位置と比較していることを確認できます。

更新:スクロール方向を考慮したソリューションは次のとおりです: http://jsfiddle.net/dUVmh/36/

于 2013-01-01T10:11:42.897 に答える