How to get Scroll event and count the number of scroll events

I am trying to append data to html table when the user scrolls down to the end of the page, which i am able to do. But how do I keep the count of scroll downs?? At each instance I need the count to be added by one, each time开发者_运维技巧 my url will be appended by that count.. and when the count reaches 6, i should stop appending the count to the urls.. Please share some thought on how to approach that...

test file is added here...

var count = 1;  
jQuery("#scrollPane").scroll(function() {
    if (Math.ceil(boxHeight - $inner.offset().top + boxOffsetTop) >= innerOuterHeight ) {
    if(count==6)
    {
        alert("stop");
    }
    count++;

}
});

http://jsfiddle.net/sk5yc/4/

var counter = 1;
$(window).bind('scroll', function() {
    if ($(window).scrollTop() >= $(document).height() - $(window).height() - 10) {
        alert(counter + " scroll me again");
        counter++;
        if (counter > 6) {
            $(this).unbind('scroll');
            alert('no more scrolling')
        }
    }
});

-10 indicates how far away from end of page user must be before function executes. This gives you the flexibility to adjust the behavior as needed.

When count reaches 6, it will unbind the scroll. So the feature is turned off.

Check working example at http://jsfiddle.net/wQfMx/3/

Tracking the scroll like this will probably cause you problems.

I have written an article which tracks scroll depth and reports information back to Google Analytics.

In my development I discovered that the scroll event is fired many times, a lot more than I expected. It tracking a count would be very unpredictable. I think it would probably be better to track if you are 90% scrolled down the document. However you also need to have a trigger mechanism to stop processing events until you are ready to process more or you will end up making a series of load content calls in quick succession.

The following code is triggered when you reach 90% scroll depth for the document. It then locks itself and doesn't fire the event any more. After you have loaded your content you could reset the IsDuplicateScrollEvent back to 0 and the scroll load trigger would work again.

<script src='http://ajax.microsoft.com/ajax/jquery/jquery-1.3.2.min.js' type='text/javascript'></script> 
<script type='text/javascript'>
/* <![CDATA[ */
    var IsDuplicateScrollEvent = 0;

    $(document).ready(function () {
        TrackEventsForPageScroll();
    });


    function TrackEventsForPageScroll()
    {
       $(window).scroll(function(){
         var scrollPercent = GetScrollPercent();

         if(scrollPercent > 90)
         {
           if(IsDuplicateScrollEvent == 0)
           { 
             IsDuplicateScrollEvent = 1;
             alert("Page Scrolled to 90% in " + document.location.href);
             // trigger your content load here
           }
         }
       }); 
    }

    function GetScrollPercent()
    {
         var bottom = $(window).height() + $(window).scrollTop();
         var height = $(document).height();

         return Math.round(100*bottom/height);
    } 
/* ]]> */
</script>

This code is taken from my article at:

• http://runtingsproper.blogspot.com/2011/04/tracking-scroll-depth-to-reveal-content.html

Are you trying an 'infinite scroll'? If that's the case, there are already some jquery plugins for that like http://plugins.jquery.com/project/scrollLoad

There are also tutorial for this like http://ajaxian.com/archives/implementing-infinite-scrolling-with-jquery