Question

所以当用户滚动时，我试图让几个div滚动到其内容中的某个位置。这是我目前的代码：

var target = 0;
var main_scroll = 0;    
var top_scroll = 0; 
var bot_scroll = 0; 
var counter = 1;

$('.main-container').on('scroll', function() {
    if ($('#trigger-' + (counter + 1)).length && $(this).scrollTop() > target) {                
        main_scroll = main_scroll + $('.main-container').height();          
        $('.main-container').animate({              
            scrollTop: main_scroll              
        }, 1000);

        top_scroll = top_scroll + $('.top-container').height();         
        $('.top-container').animate({               
            scrollTop: top_scroll               
        }, 1000);

        bot_scroll = bot_scroll + $('.bottom-container').height();          
        $('.bottom-container').animate({                
            scrollTop: bot_scroll               
        }, 1000);

        target = target + $('.main-container').height();            
        counter++;            
    } else if ($('#trigger-' + (counter - 1)).length && $(this).scrollTop() < target) {
        main_scroll = main_scroll - $('.main-container').height();              
        $('.main-container').animate({              
            scrollTop: main_scroll              
        }, 1000);

        top_scroll = top_scroll - $('.top-container').height();             
        $('.top-container').animate({               
            scrollTop: top_scroll               
        }, 1000);

        bot_scroll = bot_scroll - $('.bottom-container').height();          
        $('.bottom-container').animate({                
            scrollTop: bot_scroll               
        }, 1000);

        target = target - $('.main-container').height();            
        counter--;              
    }        
});

现在看来，如果我滚动一次，div会不断地上下跳动。不是100％肯定我做错了什么。

Answer 1

我实际上可以通过使用：

来解决这个问题

if ( ! $(this).is(':animated') ) {

确保我的动画没有触发滚动事件。

jQuery滚动事件不断触发滚动功能

1 个答案: