scroll到底部事件偵測

HTML

<div id="text">
    <p></p>
</div>
<ul>
    <li id="scrollHeight"> </li>
    <li id="scrollTop"> </li>
    <li id="outerHeight"> </li>
</ul>

<div id="load" class=">讀取</div>

CSS

#text {
    border:1px solid #CCC;
    padding: 1em;
    margin: 1em;
    overflow-y: scroll;
    height: 200px;
    width: 500px;
}
#text h2 {
    font-size: x-large;   
    font-weight: bold;
}
#text p {
    background-color: green;
    padding: 1em;  
    height: 1000px;
}

JavaScript

$('#text').scroll(function() {
    var scrollDiv = $(this);
    var sh = scrollDiv[0].scrollHeight;
    var st = scrollDiv.scrollTop();
    var oh = scrollDiv.outerHeight();
    $('#scrollHeight').text('scrollHeight:' + sh);
    $('#scrollTop').text('scrollTop:' + st);
    $('#outerHeight').text('outerHeight:' + oh);

    if ((st + oh) > (sh * 0.8)) {
        console.log('xx');
    }

});