jQuery偵測網頁捲動到最底
因為FB的動態消息,會在網頁捲到最底的時候繼續展開更舊的訊息,這個行為很方便,一來是每次讀取的資料不需要太多,二來是不需要做一個"更多訊息"或分頁的按鈕,去增加使用者操作的時間及不便,研究了一下,果然也是懂了就很簡單。
首先要在jQuery偵測捲軸動作是這樣:
如果是網站整體的話則使用$(window)去偵測scroll行為,然後用以下幾個去判斷目前卷軸的位置。
最後判斷捲軸頂點+所見範圍高度,如果等於整體網頁高度,代表他捲動到網頁的底部了。
首先要在jQuery偵測捲軸動作是這樣:
- $(selector).scroll(function(){
- });
如果是網站整體的話則使用$(window)去偵測scroll行為,然後用以下幾個去判斷目前卷軸的位置。
- //判斷整體網頁的高度
- var $BodyHeight = $(document).height();
- //判斷所見範圍的高度
- var $ViewportHeight=$(window).height();
- //偵測目前捲軸頂點
- $ScrollTop=$(this).scrollTop();
最後判斷捲軸頂點+所見範圍高度,如果等於整體網頁高度,代表他捲動到網頁的底部了。
- if($BodyHeight==($ViewportHeight+$ScrollTop)){
- alert("Here is bottom");
- }
留言