How To Capture Scroll Event?

I want to implement infinite scrolling. Below is a short form of my layout. Since I have some elements relative positioned the javascript scroll event does not fire. How can I fix

Solution 1:

The correct way to implement it is:

<divid="container"onScroll="handleOnScroll();"><script>functionhandleOnScroll() {
        alert("scroll");
    };
</script>

Solution 2:

EDIT: Since you tagged your question with jquery...

---

To capture the scroll event using jQuery...

HTML:

<div id="container">
    CONTENT
</div> 

jQuery:

$(document).ready(function() {

    $('#container').scroll(function() {
        alert('scroll');
        // presumably your infinite scrolling code here
    });

});

See: http://api.jquery.com/scroll/

Solution 3:

This is what i used in my code...

 <div id="DataDiv" style="overflow: auto; width: 280px; height:400px; margin-top: 10px;"
                    onscroll="Onscrollfnction();">
      my content here 
 </div>

Function is as below

functionOnscrollfnction() {
            var div = document.getElementById('DataDiv');
            div.scrollLeft;
            returnfalse;
        };

After content crossing 400px, scrolling will start and will be infinite.. enjoy