I am using infinite scrolling on my html table. Here is code i use to do infinite scrolling

$('#divTable').bind('scroll', function () {
        if ($(this).scrollTop() + $(this).innerHeight() >= $(this)[0].scrollHeight) {
            currentPageNo = currentPageNo + 1;
            myservice(id, pageSize, currentPageNo);

        }
    });

When page loads it fills my table with 100 records because i pass pagesize as 100. When i scroll down at bottom of table it calls this code myservice(id, pageSize, currentPageNo); twice. I dont understand why its calling twice.

Here is my html

<div id="divTable" style="height: 535px;overflow-y: auto;overflow-x: hidden">
                    <table>
                        <tbody data-bind="foreach: myData">

                            <tr >

                                <td style="padding: 8px;width: 50px;" data-bind="text: Id "></td>

                            </tr>

                        </tbody>
                    </table>

                </div>

I had a similar problem when I was trying to hijack the scroll event and use it to allow my user to advance one page at a time. On a track pad you can have what I call "intertial scrolling" which will cause your event handler to fire too many times.

You need to be able to identify inertial scrolling and only run your event handler if the scrolling is not inertial scrolling.

Here is a code snippet:

var event = normalizeEvent(event);
  if(event.timeStamp - smartScroll.timeStamp < 50){

    smartScroll.inertia = true;
  }else{

    smartScroll.inertia = false;
  }

Based on the value for smartScroll.inertia, you would determine if the event handler should react or not.

You can pick out the full code here, although there is a lot here that does not pertain to your case: http://www.oliverpetkovski.com/javascript/main.js

more