Question

i have a div tag which is set to overflow:scroll in css.
i have a callback which is supposed to be called on the end of scroll of the element which is found using this.

$('#details').scroll( function () {  
    if ($(this).height() == ($(this).get(0).scrollHeight - $(this).scrollTop())) {  
        getDetails($("span:last").attr("id"), 3);  
    }  
});  

where getDetails is the callback im using. it takes the last element of the span inside a div and sends it as a value. its all ajax calls. problem is getDetails gets called thrice everytime i hover to the end of the div. any suggestions on how i make it to be called once?

The repeated callback happens only when i use the scroll wheel or press the scroll bar button to go down. Everything works fine when scrollbar is dragged.

Answer 1

I didn’t test this, but something along these lines might work. Its quite hacky though…

$('#details').data("didfire", false).scroll( function () {  
    if ($(this).height() == ($(this).get(0).scrollHeight - $(this).scrollTop())) {  
        if(!$(this).data("didfire")) {
            getDetails($("span:last").attr("id"), 3);  

            $(this).data("didfire", true)
            var ref = $(this);
            setTimeout(function(){
                ref.data("didfire", false);
            }, 500);
        }
    }  
});