jQuery偵測網頁捲動到最底

因為FB的動態消息,會在網頁捲到最底的時候繼續展開更舊的訊息,這個行為很方便,一來是每次讀取的資料不需要太多,二來是不需要做一個"更多訊息"或分頁的按鈕,去增加使用者操作的時間及不便,研究了一下,果然也是懂了就很簡單。

首先要在jQuery偵測捲軸動作是這樣:
  1. $(selector).scroll(function(){   
  2.   
  3. });  

如果是網站整體的話則使用$(window)去偵測scroll行為,然後用以下幾個去判斷目前卷軸的位置。
  1. //判斷整體網頁的高度   
  2. var $BodyHeight = $(document).height();   
  3. //判斷所見範圍的高度   
  4. var $ViewportHeight=$(window).height();   
  5. //偵測目前捲軸頂點   
  6. $ScrollTop=$(this).scrollTop();  

最後判斷捲軸頂點+所見範圍高度,如果等於整體網頁高度,代表他捲動到網頁的底部了。
  1. if($BodyHeight==($ViewportHeight+$ScrollTop)){   
  2.     alert("Here is bottom");       
  3. }  

留言