JS獲取各種寬度、高度的簡單介紹：
scrollHeight: 獲取對象的滾動高度。
scrollLeft:設置或獲取位於對象左邊界和窗口中目前可見內容的最左端之間的距離
scrollTop:設置或獲取位於對象最頂端和窗口中可見內容的最頂端之間的距離
scrollWidth:獲取對象的滾動寬度
offsetHeight:獲取對象相對於版面或由父坐標 offsetParent 屬性指定的父坐標的高度
offsetLeft:獲取對象相對於版面或由 offsetParent 屬性指定的父坐標的計算左側位置
offsetTop:獲取對象相對於版面或由 offsetTop 屬性指定的父坐標的計算頂端位置
event.clientX 相對文檔的水平座標
event.clientY 相對文檔的垂直座標
event.offsetX 相對容器的水平坐標
event.offsetY 相對容器的垂直坐標
document.documentElement.scrollTop 垂直方向滾動的值
event.clientX+document.documentElement.scrollTop 相對文檔的水平座標+垂直方向滾動的量
以上主要指IE之中，FireFox差異如下：
IE6.0、FF1.06+：
clientWidth = width + padding
clientHeight = height + padding
offsetWidth = width + padding + border
offsetHeight = height + padding + borderIE5.0/5.5：
clientWidth = width - border
clientHeight = height - border
offsetWidth = width
offsetHeight = height(需要提一下：CSS中的margin屬性，與clientWidth、offsetWidth、clientHeight、offsetHeight均無關)
offsetWidth (width+padding+border)假設 obj 為某個 HTML 控件。
obj.offsetTop 指 obj 距離上方或上層控件的位置，整型，單位像素。
obj.offsetLeft 指 obj 距離左方或上層控件的位置，整型，單位像素。
obj.offsetWidth 指 obj 控件自身的寬度，整型，單位像素。獲取對象可見內容的寬度，不包括滾動條，不包括邊框；
obj.offsetHeight 指 obj 控件自身的高度，整型，單位像素。
offsetWidth 與 style.width 的區別
一、offsetTop 返回的是數字，而 style.top 返回的是字符串，除了數字外還帶有單位：px。
二、offsetTop 只讀，而 style.top 可讀寫。
三、如果沒有給 HTML 元素指定過 top 樣式，則 style.top 返回的是空字符串。
jQuery獲取各種寬度、高度的簡單介紹
alert($(window).height()); //瀏覽器時下窗口可視區域高度
alert($(document).height()); //瀏覽器時下窗口文檔的高度
alert($(document.body).height());//瀏覽器時下窗口文檔body的高度
alert($(document.body).outerHeight(true));//瀏覽器時下窗口文檔body的總高度 包括border padding margin
alert($(window).width()); //瀏覽器時下窗口可視區域寬度
alert($(document).width());//瀏覽器時下窗口文檔對於象寬度
alert($(document.body).width());//瀏覽器時下窗口文檔body的高度
alert($(document.body).outerWidth(true));//瀏覽器時下窗口文檔body的總寬度 包括border padding margin
alert($(document).scrollTop()); //獲取滾動條到頂部的垂直高度
$('#outer-div')[0].scrollHeight
//獲取div的實際高度
alert($(document).scrollLeft()); //獲取滾動條到左邊的垂直寬度 scrollTop為滾動條在Y軸上的滾動距離。
clientHeight為內容可視區域的高度。
scrollHeight為內容可視區域的高度加上溢出（滾動）的距離。
從這個三個屬性的介紹就可以看出來，滾動條到底部的條件即為scrollTop + clientHeight == scrollHeight。
jquery實現判斷滾動條滾動到底部：
<!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.js"></script>
<script language="javascript">
$(document).ready(function (){
$('#scroll-top-msg').html($("#outer-div")[0].scrollTop);
$('#scroll-height-msg').html($("#outer-div")[0].scrollHeight);
$("#outer-div").scroll(function(){
$('#scroll-to-bottom-msg').html('');
$('#scroll-top-msg').html($("#outer-div")[0].scrollTop);
$('#scroll-height-msg').html($("#outer-div")[0].scrollHeight);
if($("#outer-div")[0].scrollTop >= ($("#outer-div")[0].scrollHeight - $("#outer-div").height()))
$('#scroll-to-bottom-msg').html('滾動到DIV底部了');
});
});
</script>
<body>
Scroll Top : <span id="scroll-top-msg">0</span> |
Scroll Height : <span id="scroll-height-msg">0</span> <br/>
<span id="scroll-to-bottom-msg"></span>
<div id="outer-div" style="overflow-y:auto; overflow-x:hidden; width:800px;height:500px;background:gray;">
<div style="height:750px;background:#aea;width:600px;margin:0 auto;">
</div>
</div>
</body>
</html> -
<!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.js"></script> <script language="javascript"> $(document).ready(function (){ $('#scroll-top-msg').html($("#outer-div")[0].scrollTop); $('#scroll-height-msg').html($("#outer-div")[0].scrollHeight); $("#outer-div").scroll(function(){ $('#scroll-to-bottom-msg').html(''); $('#scroll-top-msg').html($("#outer-div")[0].scrollTop); $('#scroll-height-msg').html($("#outer-div")[0].scrollHeight); if($("#outer-div")[0].scrollTop / （($("#outer-div")[0].scrollHeight - $("#outer-div").height())）== 0.95 ) //在滾動條距離底端5%以內 $('#scroll-to-bottom-msg').html('滾動到DIV底部了'); }); }); </script> <body> Scroll Top : <span id="scroll-top-msg">0</span> | Scroll Height : <span id="scroll-height-msg">0</span> <br/> <span id="scroll-to-bottom-msg"></span> <div id="outer-div" style="overflow-y:auto; overflow-x:hidden; width:800px;height:500px;background:gray;"> <div style="height:750px;background:#aea;width:600px;margin:0 auto;"> </div> </div> </body> </html>