像facebook一開始只會秀出最近的動態，當拉到底部後會再撈取資料放置到最底部
原理很簡單，利用javascript去動態判斷捲軸已經到底部
接下來用ajax去另一個網頁撈新的資料，同時修改現在資料的定位點
接著將撈回來的資料用jquery append到原本資料的底部
以下是大概的範例
======================捲軸部分的CSS==========================
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.js"></script>
<style>
#scroll {
width: 99%;
height: 97%;
overflow: auto; /* 讓它有捲軸 */
border: 1px solid ;
margin-bottom: 10px;
padding: 0px;
}
.red {
color: red;
}
</style>
======================判斷捲軸與新增資料======================
<script>
var range = 50; //這邊是一次要撈50筆資料放到表格最後
var start = 0; //從第0筆開始顯示
$(function()
{
$('#scroll').scroll(function()
{
var $this = $(this);
var $scroll = $('#scroll'),
_height = $scroll.height();
_scrollHeight = $scroll.prop('scrollHeight');
_maxScrollHeight = _scrollHeight - _height;
if(_maxScrollHeight < $this.scrollTop() )
{
var end = start + range;
$.ajax({
type: "GET",
url: "data.php",
data: "start=" + start + "&end=" + end,
success: function(data){
$("table tr:last").after(data); //表格最後插入資料，用append會出問題
sleep(200);
}
});
start = end + 1;
}
});
});
function sleep(ms){
var starttime= new Date().getTime();
do{
}while((new Date().getTime()-starttime)<ms)
}
</script>
======================html==========================
<div id='scroll'>
<table name='table' border='1' width='800'>
<tr><td>ID</td><td>公司名稱</td><td>網址</td><td>住址</td><td>電話</td></td>
<div id='data'><?php echo initdata(); ?></div> //起始資料
</table>
</div>
======================實際效果==========================
基本上到底是會自動像data.php取得新的資料沒啥問題
不過不知道為什麼一次會取一堆資料回來
猜測可能是還沒取回資料前滾輪繼續往下拉導致程式認定多次到達底部，
這個部分在到達底部時加上alert或讀取畫面應可解決。
原理很簡單，利用javascript去動態判斷捲軸已經到底部
接下來用ajax去另一個網頁撈新的資料，同時修改現在資料的定位點
接著將撈回來的資料用jquery append到原本資料的底部
以下是大概的範例
======================捲軸部分的CSS==========================
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.js"></script>
<style>
#scroll {
width: 99%;
height: 97%;
overflow: auto; /* 讓它有捲軸 */
border: 1px solid ;
margin-bottom: 10px;
padding: 0px;
}
.red {
color: red;
}
</style>
======================判斷捲軸與新增資料======================
<script>
var range = 50; //這邊是一次要撈50筆資料放到表格最後
var start = 0; //從第0筆開始顯示
$(function()
{
$('#scroll').scroll(function()
{
var $this = $(this);
var $scroll = $('#scroll'),
_height = $scroll.height();
_scrollHeight = $scroll.prop('scrollHeight');
_maxScrollHeight = _scrollHeight - _height;
if(_maxScrollHeight < $this.scrollTop() )
{
var end = start + range;
$.ajax({
type: "GET",
url: "data.php",
data: "start=" + start + "&end=" + end,
success: function(data){
$("table tr:last").after(data); //表格最後插入資料，用append會出問題
sleep(200);
}
});
start = end + 1;
}
});
});
function sleep(ms){
var starttime= new Date().getTime();
do{
}while((new Date().getTime()-starttime)<ms)
}
</script>
======================html==========================
<div id='scroll'>
<table name='table' border='1' width='800'>
<tr><td>ID</td><td>公司名稱</td><td>網址</td><td>住址</td><td>電話</td></td>
<div id='data'><?php echo initdata(); ?></div> //起始資料
</table>
</div>
======================實際效果==========================
基本上到底是會自動像data.php取得新的資料沒啥問題
不過不知道為什麼一次會取一堆資料回來
猜測可能是還沒取回資料前滾輪繼續往下拉導致程式認定多次到達底部，
這個部分在到達底部時加上alert或讀取畫面應可解決。