瀏覽器 滾動條 clientHeight、offsetHeight、scrollTop。
需要了解三個dom元素，分別是：clientHeight、offsetHeight、scrollTop。
clientHeight：可見高度。
offsetHeight：控制元件的實際高度。
scrollTop：這個是什麼呢？他可以理解為滾動條可以滾動的長度。
舉例，如果一個DIV高度是400px（即clientHeight為400），而裡面的內容是一個很長的列表，內容的高度是1000px（即offsetHeight為1000）。
那麼，可見部分我們看到400px，1000px的內容中還有600px不可見。而這不可見的部分呢，正是我們通過拉動滾動條才能把這一部分顯示出來。
你如果滾動條不拉動，此時scrollTop為0，如果你把滾動條拉到底，顯示出列表最下面的部分，此時，scrollTop為600。
所以scrollTop的取值區間為[0, 600]。 所以這個600可以理解為滾動條可以滾動的長度。
一、如何獲得網頁整體高度？
利用jQuery獲取body高度方法：$(documet).height();
二、如何獲得滾動高度？
利用jQuery獲取滾動高度方法：$("html,body").scrollTop();
三、如何獲得瀏覽器可見高度？
利用JS獲取瀏覽器可見高度方法：document.documentElement.clientHeight;
首先，我們拉動滾動條，從最上面拉到最下面，變化的是scrollTop的值，而這個值是有一個區間的。
這個區間是： [0, (offsetHeight - clientHeight)]
即，滾動條拉動的整個過程的變化在 0 到 (offsetHeight – clientHeight) 範圍之內。
1、判斷滾動條滾動到最底端： scrollTop == (offsetHeight – clientHeight)
2、在滾動條距離底端50px以內： (offsetHeight – clientHeight) – scrollTop <= 50
3、在滾動條距離底端5%以內： scrollTop / (offsetHeight – clientHeight) >= 0.95
DTD已宣告
IE
document.documentElement.scrollHeight 瀏覽器所有內容高度 ,document.body.scrollHeight 瀏覽器所有內容高度
document.documentElement.scrollTop 瀏覽器滾動部分高度，document.body.scrollTop 始終為0
document.documentElement.clientHeight 瀏覽器可視部分高度，document.body.clientHeight 瀏覽器所有內容高度
FF
document.documentElement.scrollHeight 瀏覽器所有內容高度 ,document.body.scrollHeight 瀏覽器所有內容高度
document.documentElement.scrollTop 瀏覽器滾動部分高度，document.body.scrollTop 始終為0
document.documentElement.clientHeight 瀏覽器可視部分高度，document.body.clientHeight 瀏覽器所有內容高度
Chrome
document.documentElement.scrollHeight 瀏覽器所有內容高度， document.body.scrollHeight 瀏覽器所有內容高度
document.documentElement.scrollTop 始終為0，document.body.scrollTop 瀏覽器滾動部分高度
document.documentElement.clientHeight 瀏覽器可視部分高度，document.body.clientHeight 瀏覽器所有內容高度
DTD未宣告
IE
document.documentElement.scrollHeight 瀏覽器可視部分高度，document.body.scrollHeight 瀏覽器所有內容高度
document.documentElement.scrollTop 始終為0，document.body.scrollTop 瀏覽器滾動部分高度
document.documentElement.clientHeight 始終為0，document.body.clientHeight 瀏覽器可視部分高度
FF
document.documentElement.scrollHeight 瀏覽器可視部分高度, document.body.scrollHeight 瀏覽器所有內容高度
document.documentElement.scrollTop 始終為0，document.body.scrollTop 瀏覽器滾動部分高度
document.documentElement.clientHeight 瀏覽器所有內容高度，document.body.clientHeight 瀏覽器可視部分高度
Chrome
document.documentElement.scrollHeight 瀏覽器可視部分高度,document.body.scrollHeight 瀏覽器所有內容高度
document.documentElement.scrollTop 始終為0，document.body.scrollTop 瀏覽器滾動部分高度
document.documentElement.clientHeight 瀏覽器所有內容高度，document.body.clientHeight 瀏覽器可視部分高度
例子
Java程式碼
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="jquery.js"></script>
</head>
<style>
</style>
<script>
$(function(){
var obj = document.getElementById("test");
console.log(obj.offsetHeight);
console.log(obj.clientHeight);
console.log(obj.scrollTop);
});
window.onscroll=function(){
//alert(1);
var obj = document.getElementById("test");
//滾動條距離頂部的高度
console.log("getScrollTop() : " + getScrollTop());
//視覺化視窗的高度
console.log("getClientHeight() : " + getClientHeight());
//內容的高度
console.log("getScrollHeight() : " + getScrollHeight());
//test();
};
/********************
* 取視窗滾動條高度
******************/
function getScrollTop() {
var scrollTop = 0;
if (document.documentElement && document.documentElement.scrollTop) {
scrollTop = document.documentElement.scrollTop
} else {
if (document.body) {
scrollTop = document.body.scrollTop
}
}
return scrollTop
}
/********************
* 取視窗可視範圍的高度
*******************/
function getClientHeight() {
var clientHeight = 0;
if (document.body.clientHeight && document.documentElement.clientHeight) {
var clientHeight = (document.body.clientHeight < document.documentElement.clientHeight) ? document.body.clientHeight: document.documentElement.clientHeight
} else {
var clientHeight = (document.body.clientHeight > document.documentElement.clientHeight) ? document.body.clientHeight: document.documentElement.clientHeight
}
return clientHeight
}
/********************
* 取文件內容實際高度
*******************/
function getScrollHeight() {
return Math.max(document.body.scrollHeight, document.documentElement.scrollHeight)
}
function test() {
if (getScrollTop() + getClientHeight() == getScrollHeight()) {
alert("到達底部")
} else {
alert("沒有到達底部")
}
};
</script>
<body>
<div id="test" style="width:100%;height:3000px;border:1px solid red;">
dsafdsaf
</div>
</body>
</html>