2

私のスクリプトの目標は、ユーザーが下にスクロールしたときに、私のページが次のdivにスクロールする必要があることです。このため、スクリプトはユーザーが上下にスクロールするかどうかを区別します。その後、彼がスクロールするactiveと、最初のdivのクラスが削除され、次のdivに追加されます。次に、クラスが付いた新しいdivまでスクロールしactiveます。問題は、次のスクロールではなく、最初のスクロールでのみ機能することです。

私のコード：

$(window).load(function() {
    var tempScrollTop, currentScrollTop = 0;
    var $current = $("#container > .active");
    var next = $('.active').next();
    var prev = $('.active').prev();

    $(window).scroll(function() {
        currentScrollTop = $(window).scrollTop();

        if (tempScrollTop < currentScrollTop) { //scrolling down 
            $current.removeClass('active').next().addClass('active'); 
            $.scrollTo(next, 1000);
        }
        else if (tempScrollTop > currentScrollTop ) { //scrolling up
            $current.removeClass('active').prev().addClass('active');
            $.scrollTo(prev, 1000);
        }

        tempScrollTop = currentScrollTop;
    }); 
});

誰か助けてもらえますか？

4

2 に答える 2

0

次の変数と前の変数をスクロール関数に移動する必要があります

$(window).load(function(){

var tempScrollTop, currentScrollTop = 0;



$(window).scroll(function(){

currentScrollTop = $(window).scrollTop();
//you need to assign the $current, next and prev here so they get the current elements (not the ones that were set at the beginning
var $current = $("#container > .active");    
var next = $('.active').next();
var prev = $('.active').prev();    


if (tempScrollTop < currentScrollTop )//scrolling down
{
$current.removeClass('active').next().addClass('active');
$.scrollTo(next, 1000);
}
else if (tempScrollTop > currentScrollTop )//scrolling up

{
$current.removeClass('active').prev().addClass('active');
$.scrollTo(prev, 1000);
}
tempScrollTop = currentScrollTop;
});
});

更新$ currentvar をscroll関数にも追加しました。

于 2012-04-13T15:33:53.383 に答える
0

私は答えを見つけました

var lastScrollTop = 0; var isDoingStuff = false;

$(document).scroll(function(event) {
    //abandon 
    if(isDoingStuff) { return; }

    if ($(this).scrollTop() > lastScrollTop) {
        //console.log('down');
        $('.active').removeClass('active').next('div').addClass('active');
        isDoingStuff = true;
        $('html,body').animate( {scrollTop: $('.active').offset().top }, 1000, function() {
            setTimeout(function() {isDoingStuff = false;}, 100);
            console.log('off');
        });
    } else {
        //console.log('up');
    }
    lastScrollTop = $(this).scrollTop();
})​
于 2012-04-19T09:11:21.547 に答える