Div with overflow:auto, end reaches = start a function

Question

Possible Duplicate:
JavaScript: Scroll Position of div with “overflow: auto”

Hi, i want to start a function XXX(); when the scroll-end from a div (overflow:auto;) is reached.

<div style="width:200px; height:500px; overflow:auto;">
/* content here */
</div>

Is this possible?

greetz from germany Peter

Answer 1

It is possible if you add an extra <div> inside the <div style="overflow: auto">. We then use this internal div to capture the height of the text. This then allows us to us to check if scrolling is finished. You can see it in action here.

The code itself is below where #parent is the id I gave to the div in your example:

$(document).ready(function(){
    var parent = $('#parent');
    var text = $('<div id="text">').text(parent.text());
    parent.text('');
    parent.append(text);
});

$('#parent').scroll(function(){
    if(($(this).scrollTop() + $(this).height()) == $('#text').height())
        alert('Done scrolling');
});