jQuery 裡和滾動條有關的概念很多，但是有三個屬性和滾動條的拖動有關，就是：scrollTop、scrollLeft、scrollHeight。其中 scrollHeight 屬性，網際網路上幾乎搜素不到關于它的應用技巧，而我正好需要用到它。
我們現在隻探讨和垂直滾動有關的 scrollTop、scrollHeight 屬性。
一、滾動條有關屬性的正确了解：
假設有以下Html代碼：
<div id="div1" style="overflow-y:auto; overflow-x:hidden; height:500px;">
<div style="height:750px;">
</div>
</div> 由于内部的div标簽高度比外部的長，并且外部的div允許自動出現垂直滾動條，是以用浏覽器打開後，可以看到垂直滾動條。滾動條向下拖動一段距離，看到的頁面效果如下（右部的a、b是我抓圖後，用PS标出來的）：
那麼，這裡的外部div 的scrollTop、scrollHeight 屬性到底是什麼呢？
有人說，scrollTop等于圖中标出的a。scrollHeight 等于外部div的高度500px。其實，都不對。
其實，圖中标出的a、b，對我們程式設計寫js代碼沒有任何具體意義，它僅僅具有象征意義。
實際上，在js代碼裡，滾動條是被抽象為一個“點”來對待的。scrollHeight其實不是“滾動條的高度”（b），而是表示滾動條需要滾動的高度，即内部div的高度750px。而scrollTop表示滾動條（一個點）目前的位置在750px裡占了多少，不是圖中标出的a。
這時，我們很歎服Windows的設計者，滾動條設計的如此形象美妙，欺騙了多少頭腦簡單的滑鼠操作員。a和b的距離分别辨別滾動條滾動了和需要滾動的距離，它們之間分别有一個對應的關系，但這些不是我們這些開發應用程式的程式員考慮的，是設計作業系統GUI圖形接口的程式員考慮的。
判斷垂直滾動條是否到達底部
廓清了以上的概念，編碼其實就比較簡單了， 以下是示例代碼：
<!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>
<script language="javascript" src="jquery-1.4.2.min.js" mce_src="jquery-1.4.2.min.js"></script>
<script language="javascript">
$(document).ready(function (){
var nScrollHight = 0; //滾動距離總長(注意不是滾動條的長度)
var nScrollTop = 0; //滾動到的目前位置
var nDivHight = $("#div1").height();
$("#div1").scroll(function(){
nScrollHight = $(this)[0].scrollHeight;
nScrollTop = $(this)[0].scrollTop;
var paddingBottom = parseInt( $(this).css('padding-bottom') ),paddingTop = parseInt( $(this).css('padding-top') );
if(nScrollTop + paddingBottom + paddingTop + nDivHight >= nScrollHight)
alert("滾動條到底部了");
});
});
</script>
<body>
<div id="div1" style="overflow-y:auto; overflow-x:hidden; height:500px;">
<div style="background-color:#ccc; height:750px;">IE 和 FF 下測試通過</div>
</div>
</body>
</html> 代碼解說：
内部div高度為750，外部div高度為500，是以垂直滾動條需要滾動750-500=250的距離，就會到達底部，參見語句nScrollTop + nDivHight >= nScrollHight。
程式中，在外部div的scroll（滾動）事件中偵測和執行if判斷語句，是非常消耗CPU資源的。用滑鼠拖拉滾動條，隻要有一個像素的變動就會觸發該事件。但點選滾動條兩頭的箭頭，事件觸發的頻率會低得多。是以滾動條的scroll事件要謹慎使用。
本示例判斷的是沒有水準滾動條的情況，在有水準滾動條時，情況會有細小的變化，是以nScrollTop + nDivHight >= nScrollHight語句中，需要用“>=”比較運算符，而沒有水準滾動條的時候，等号“=”就足夠了。大家可以實際測試一下。還可以判斷水準滾動條是否滾動到頭了。
作者：
Tyler Ning出處：
http://www.cnblogs.com/tylerdonet/本文版權歸作者和部落格園共有，歡迎轉載，但未經作者同意必須保留此段聲明，且在文章頁面明顯位置給出原文連接配接，如有問題，可以通過以下郵箱位址
[email protected]聯系我，非常感謝。
![nodejs微信開發---授權登入+擷取使用者資訊微信網頁授權[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)