jquery監聽頁面滾動條滾動事件 jquery監聽頁面滾動條滾動事件

jquery監聽頁面滾動條滾動事件

1、jQuery檢測瀏覽器window滾動條到達底部
jQuery獲取位置和尺寸相關函數：
$(document).height()   獲取整個頁面的高度
$(window).height()   獲取當前也就是瀏覽器所能看到的頁面的那部分的高度。這個大小在你縮放瀏覽器窗口大小時會改變，與document是不同的
scrollTop()    獲取匹配元素相對滾動條頂部的偏移。
scrollLeft()    獲取匹配元素相對滾動條左側的偏移。
scroll([[data],fn])   當滾動條發生變化時觸犯scroll事件
jQuery檢測滾動條到達底部代碼：

 

2、jQuery檢測div中滾動條到達底部
上半篇介紹了jQuery檢測瀏覽器window滾動條到達底部，其實還並不理解scrollTop和scrollHeight概念，一般滾動條都是放在div中的。

因爲內部的div標籤高度比外部的長，而且外部的div容許自動出現垂直滾動條，因此用瀏覽器打開後，能夠看到垂直滾動條。

那麼，這裏的外部div 的scrollTop、scrollHeight 屬性究竟是什麼呢？
   實際上，在js代碼裏，滾動條是被抽象爲一個「點」來對待的。scrollHeight其實不是「滾動條的高度」（b），而是表示滾動條須要滾動的高度，即內部div的高度750px。而scrollTop表示滾動條（一個點）當前的位置在750px裏佔了多少。

判斷垂直滾動條是否到達底部

代碼解說：
   內部div高度爲750，外部div高度爲500，因此垂直滾動條須要滾動750-500=250的距離，就會到達底部，參見語句nScrollTop + nDivHight >= nScrollHight。
   程序中，在外部div的scroll（滾動）事件中偵測和執行if判斷語句，是很是消耗CPU資源的。用鼠標拖拉滾動條，只要有一個像素的變更就會觸發該事件。但點擊滾動條兩頭的箭頭，事件觸發的頻率會低得多。因此滾動條的scroll事件要謹慎使用。
   本示例判斷的是沒有水平滾動條的狀況，在有水平滾動條時，狀況會有細小的變化，因此nScrollTop + nDivHight >= nScrollHight語句中，須要用「>=」比較運算符，而沒有水平滾動條的時候，等號「=」就足夠了。你們能夠實際測試一下。還能夠判斷水平滾動條是否滾動到頭了。

三、jQuery滾動條到達底部加載數據

 

爲人：謙遜、激情、博學、審問、慎思、明辨、 篤行
學問：紙上得來終覺淺，絕知此事要躬行
爲事：工欲善其事，必先利其器。
轉載請標註出處！

1、jQuery檢測瀏覽器window滾動條到達底部
jQuery獲取位置和尺寸相關函數：
$(document).height()   獲取整個頁面的高度
$(window).height()   獲取當前也就是瀏覽器所能看到的頁面的那部分的高度。這個大小在你縮放瀏覽器窗口大小時會改變，與document是不同的
scrollTop()    獲取匹配元素相對滾動條頂部的偏移。
scrollLeft()    獲取匹配元素相對滾動條左側的偏移。
scroll([[data],fn])   當滾動條發生變化時觸犯scroll事件
jQuery檢測滾動條到達底部代碼：

 

2、jQuery檢測div中滾動條到達底部
上半篇介紹了jQuery檢測瀏覽器window滾動條到達底部，其實還並不理解scrollTop和scrollHeight概念，一般滾動條都是放在div中的。

因爲內部的div標籤高度比外部的長，而且外部的div容許自動出現垂直滾動條，因此用瀏覽器打開後，能夠看到垂直滾動條。

那麼，這裏的外部div 的scrollTop、scrollHeight 屬性究竟是什麼呢？
   實際上，在js代碼裏，滾動條是被抽象爲一個「點」來對待的。scrollHeight其實不是「滾動條的高度」（b），而是表示滾動條須要滾動的高度，即內部div的高度750px。而scrollTop表示滾動條（一個點）當前的位置在750px裏佔了多少。

判斷垂直滾動條是否到達底部

代碼解說：
   內部div高度爲750，外部div高度爲500，因此垂直滾動條須要滾動750-500=250的距離，就會到達底部，參見語句nScrollTop + nDivHight >= nScrollHight。
   程序中，在外部div的scroll（滾動）事件中偵測和執行if判斷語句，是很是消耗CPU資源的。用鼠標拖拉滾動條，只要有一個像素的變更就會觸發該事件。但點擊滾動條兩頭的箭頭，事件觸發的頻率會低得多。因此滾動條的scroll事件要謹慎使用。
   本示例判斷的是沒有水平滾動條的狀況，在有水平滾動條時，狀況會有細小的變化，因此nScrollTop + nDivHight >= nScrollHight語句中，須要用「>=」比較運算符，而沒有水平滾動條的時候，等號「=」就足夠了。你們能夠實際測試一下。還能夠判斷水平滾動條是否滾動到頭了。

三、jQuery滾動條到達底部加載數據