最近用新浪微博的时候，看了下微博滚动获取微博信息的功能，正好苹果巴士的客户想做一个差不多的功能,所以就分析了一下，大概思路是根据滚动条滚动事件来触发获取微博的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>