2016-08-04 85 views
0

所以我试图让一些div滚动到他们的内容当用户滚动某个地方。这是我目前的代码:jQuery滚动事件不断触发滚动功能

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--;    
    }   
}); 

就像现在这样,如果我滚动一旦divs不断反弹上下。不是100%确定我做错了什么。

+0

一个可行的例子在这里会有很多帮助,无论是在一个片段或一个http://jsfiddle.net –

回答

0

我实际上是能够通过使用来解决这个问题:

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

确保滚动事件没有被我的动画解雇。