detecting div scroll bar reach end by jquery
<p>when the below code run then browser hang. here is my code</p>

<pre><code>&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
&lt;head runat="server"&gt;
&lt;title&gt;&lt;/title&gt;
&lt;script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"&gt;&lt;/script&gt;
&lt;script src="Scripts/CenterDiv.js" type="text/javascript"&gt;&lt;/script&gt;
&lt;script type="text/javascript"&gt;
    $(document).ready(function () {
        $('#Main').center();
        $('#Main').bind('scroll', function () {
            if ($(this).scrollTop() + $(this).innerHeight() &gt;= $(this)[0].scrollHeight) {
                //var new_div = '&lt;div class="new_block"&gt;&lt;/div&gt;';
                //$('.main_content').append(new_div.load('/path/to/script.php'));
                alert("end");
            }
        });

    });
&lt;/script&gt;
&lt;style type="text/css"&gt;
.centered
{
    height:640px;
    width:700px;
    border-color:Black;
    border-width:2px;
    border-style:solid;
    overflow:scroll
}
&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;form id="form1" runat="server"&gt;
&lt;div id="Main" class="centered"&gt;
    &lt;img src="images/img1.jpg" /&gt;
&lt;/div&gt;
&lt;/form&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p>actually the code which causes browser hang is </p>

<pre><code>$('#Main').bind('scroll', function () {
            if ($(this).scrollTop() + $(this).innerHeight() &gt;= $(this)[0].scrollHeight) {
                //var new_div = '&lt;div class="new_block"&gt;&lt;/div&gt;';
                //$('.main_content').append(new_div.load('/path/to/script.php'));
                alert("end");
            }
        });
</code></pre>

<p>by the above code i was trying to detect that scroll bar drag to end of div or not. why i am getting error....please advise. thanks</p>
