早上本來想研究昨天晚上攜程的那道題目的，但是感覺不知道如何下手，就研究了下如何實作無限滾動加載資料。
以前項目裡也用到過，不過是别人封裝好的，我隻需要調用就好了。自己做還是遇到了點小問題。
1、如何确定滾動條的位置，其實想通了很簡單的，就是利用scrollHeight和scrollTop以及可視區的高度來實作的。
2、就是如何保證加載資料的時候，不會出現重複加載。這個也很簡單，标記每次加載結束的位置。如果你用的是資料庫的話，可以采用分頁的形式，每次隻添加一頁的内容。每當滾動條到底部的時候再加載下一頁就好了。
當然，你也可以對代碼進行改進，每當加載資料的時候，出現一個圈圈，提醒使用者我是在努力加載資料。使得使用者不會出現煩躁的心情。
附源碼如下：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
ul{
height: 100px;
width: 100px;
overflow: auto;
margin: 0;
padding: 0;
}
input{
width: 96px;
}
</style>
</head>
<body>
<div>
<input type="text" >
<input type="button" value="aa"/>
<ul id="ul">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>4</li>
<li>4</li>
<li>4</li>
<li>s</li>
</ul>
</div>
<script >
//要加載的資料
var arr=[1,1,2,3,8,2,32,3,5,8,28,2,3,2,3,5,3,1,4,12,1,2,1,31,23,12,3,12,3,12,3,18,35,2,1,321,3,21,3,12,3,123,6,21321,3,17,3,2,3,12,3,12,1,5,23123,1,321,3,1,23,1,3];
var ul=document.getElementById("ul");
var start=0;
//監聽滾動事件，當滾動條的位置距離小于某個值的時候，就加載資料
ul.onscroll=function(){
if(ul.scrollHeight-ul.scrollTop-90<30){
load(start,5,arr,ul);
start+=5;
}
}
//加載資料函數
function load(start,num,arr,ul){
var html="";
if(start+num>arr.length){return ;}
for(var s=start;s<start+num;s++){
html+='<li>'+arr[s]+'</li>';
}
ul.innerHTML=ul.innerHTML+html;
}
</script>
</body>
</html> 樹林美麗、幽暗而深邃，但我有諾言尚待實作，還要奔行百裡方可沉睡。 -- 羅伯特·弗羅斯特
![C# 集合類（四）：Hashtable[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)