最近用新浪微博的時候，看了下微博滾動獲取微博信息的功能，正好蘋果巴士的客戶想做一個差不多的功能,所以就分析了一下，大概思路是根據滾動條滾動事件來觸發獲取微博的AJAX，然後自動添加數據到頁面，當然了，如果刷新頁面的話，又會重新加載。
下面是研究的代碼結果，大家可以參考下：
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <title>仿照新浪微博長微博分頁功能</title>
- </head>
- <div style="width:200px;height:400px;background-color:#999999;overflow:auto;" id="outer">
- <div style="margin-top:200px;width:100px;height:500px;background-color:#eee;" id="inner">
- 微博內容在這裏。
- </div>
- </div>
- <p>
- <script type="text/javascript">
- //請保留著作權，作者：蘋果巴士 www.ipkbus.com [email protected]
- //本代碼目前不兼容IE6，更強大的功能請自行改進代碼.
- var outer_div = document.getElementById("outer");//根據div的滾動條進行滾動
- var body_div = document.body;//根據body的滾動條進行判斷
- body_div.onscroll=scrollValue;
- outer_div.onscroll=scrollValue;
- //註冊onscroll事件處理函數。當拖動滾動條時，會產生onscroll事件
- var divscrollValue = document.getElementById("inner");
- //onscroll事件的處理函數
- function scrollValue() {
- var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
- if(scrollTop<50)
- {
- divscrollValue.innerHTML="蘋果巴士裏舊的微博哦";
- }
- else{
- divscrollValue.innerHTML= "<span style='color:red'>蘋果巴士加載微博數據中...</span>";
- }
- }
- scrollValue();
- //頁面加載完成後，執行一次此函數。顯示最初的scrollTop值，此時的值爲0
- </script>
- </p>
- <p> </p>
- <p> </p>
- <p> </p>
- <p> </p>
- <p> </p>
- <p> </p>
- <p> </p>
- <p> </p>
- <p> </p>
- <p> </p>
- <p> </p>
- <p> </p>
- <p> </p>
- <p> </p>
- <p> </p>
- <p> </p>
- <p> </p>
- <p> </p>
- <p> </p>
- <p> </p>
- <p> </p>
- <p> </p>
- <p> </p>
- </body>
- </html>