列表滚动时自动加载JS效果

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
<BODY>
<script language="javascript" type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.2.6.min.js"></script>
<script language="javascript" type="text/javascript">
var getMsg = true;
$(document).ready(function() {
$("#msg").scroll(function() {
   if (this.clientHeight + this.scrollTop == this.scrollHeight) {
    // 已经滚动到底部
    var st = this.scrollTop;
    if (getMsg) {
     getMsg = false;
     // 从服务器返回后面的列表内容
     /*
     $.get("./getMessage.jsp", {mid:$("#msgList li:last").attr("mid")}, function(data) {
      // 将返回结果附加到列表
      $("#msgList").append(data);
      $("#msgList").scroll(st);
      getMsg = true;
     });
     */
     // 
     var data = "<li mid='58'>1000402:23232<span style='font-size:9px;'>(2008-06-12)</span></li>\n<li mid='57'>1000402:321<span style='font-size:9px;'>(2008-06-12)</span></li>\n<li mid='56'>1000402:df<span style='font-size:9px;'>(2008-06-12)</span></li>\n<li mid='55'>a76:a<span style='font-size:9px;'>(2008-06-12)</span></li>\n<li mid='54'>还是我:第二个<span style='font-size:9px;'>(2008-06-11)</span></li>\n<li mid='49'>1000402:x<span style='font-size:9px;'>(2008-06-11)</span></li>\n<li mid='48'>1000402:x<span style='font-size:9px;'>(2008-06-11)</span></li>\n<li mid='47'>1000402:x<span style='font-size:9px;'>(2008-06-11)</span></li>\n<li mid='46'>1000402:x<span style='font-size:9px;'>(2008-06-11)</span></li>";
     $("#msgList").append(data);
     $("#msgList").scroll(st);
     getMsg = true;
    }
   }
});
});
</script>
<div style="width:560px; height:150px; text-align:left; margin:0 auto; overflow:auto;" name="msg" id="msg">
<ul style="list-style:none; margin:0; padding:0;" name="msgList" id="msgList">
   <li mid='58'>1000402:23232<span style='font-size:9px;'>(2008-06-12)</span></li>
   <li mid='57'>1000402:321<span style='font-size:9px;'>(2008-06-12)</span></li>
   <li mid='56'>1000402:df<span style='font-size:9px;'>(2008-06-12)</span></li>
   <li mid='55'>a76:a<span style='font-size:9px;'>(2008-06-12)</span></li>
   <li mid='54'>还是我:第二个<span style='font-size:9px;'>(2008-06-11)</span></li>
   <li mid='49'>1000402:x<span style='font-size:9px;'>(2008-06-11)</span></li>
   <li mid='48'>1000402:x<span style='font-size:9px;'>(2008-06-11)</span></li>
   <li mid='47'>1000402:x<span style='font-size:9px;'>(2008-06-11)</span></li>
   <li mid='46'>1000402:x<span style='font-size:9px;'>(2008-06-11)</span></li>
</ul>
</div>
</BODY>
</HTML> 

你可能感兴趣的:(列表滚动时自动加载JS效果)