window.onscroll Bugando animation

Navigation
-1

I'm doing an animation where when the TOP > 2800 the animation will start. The animation will make the numbers within a UL LI increase from 0 to the number written.

BUG: The number sometimes goes up all the way and another one appears, or it only increases a little and when you move the screen it increases little by little. 

    window.onscroll = function(){
   var top = window.pageYOffset || document.documentElement.scrollTop
   if( top > 2800 ) {
  $('.spincrement').spincrement({
    from: 0,
    decimalPlaces:0 ,
    duration: 4000,
  });
   }

};
    
asked by anonymous 10.11.2015 / 17:50

2 answers

1

GAVE RIGHT AS FOLLOWS. 

            <script type="text/javascript">

var trava = false;
window.onscroll = function(){
   var top = window.pageYOffset || document.documentElement.scrollTop
   if( top > 2800 && !trava) {
      trava = true;
      $('.spincrement').spincrement({
         from: 0,
         decimalPlaces:0 ,
         duration: 4000,
         complete: function() { trava = true; }
      });
   }
};          
        </script>
    
11.11.2015 / 18:41
0

As you know, the window.onscroll event is triggered when there is event scrolling scroll bar, input on the keyboard to scroll scroll, as well as the mouse. So the bug scenario you described is right by the code you showed, because when you fire your animation function, the window.onscroll event is still fired. Therefore, it only increases incrementally, that is, when there is a change in the scroll. Scenery:

top = 2801 - > triggers your animation and stops; top = 2802 - > another scroll event occurs ... back to increment action from scratch

This should be causing such behavior. I understand that when you get to 2801 you want the animation to start and the onscroll event to stop and the animation to take place and finish the animation? Just once, right? If so, then you need to modify the code so that it occurs only once. A control variable or event.preventDefault () can help you.

    
10.11.2015 / 23:45
Mysqli INSERT INTO Not working [closed] I can not solve this error in Python, I am a beginner