如何判斷一個元素滾動到了底部

                            

理解：

• scrollTop為滾動條在Y軸上的滾動距離。

 

• clientHeight為內容可視區域的高度。

 

• scrollHeight為內容可視區域的高度加上溢出（滾動）的距離。

 

• 從這個三個屬性的介紹就可以看出來，滾動條到底部的條件即為scrollTop + clientHeight == scrollHeight。

 

代碼如下（兼容不同的瀏覽器）。

 所以   滾動距離+元素的高=文檔的高  才是你到底部的時刻 也就是 scrollTop + clientHeight == scrollHeight。

js的寫法：

//滾動條在Y軸上的滾動距離
function getScrollTop(){
　　var scrollTop = 0, bodyScrollTop = 0, documentScrollTop = 0;
　　if(document.body){
　　　　bodyScrollTop = document.body.scrollTop;
　　}
　　if(document.documentElement){
　　　　documentScrollTop = document.documentElement.scrollTop;
　　}
　　scrollTop = (bodyScrollTop - documentScrollTop > 0) ? bodyScrollTop : documentScrollTop;
　　return scrollTop;
}
//文檔的總高度
function getScrollHeight(){
　　var scrollHeight = 0, bodyScrollHeight = 0, documentScrollHeight = 0;
　　if(document.body){
　　　　bodyScrollHeight = document.body.scrollHeight;
　　}
　　if(document.documentElement){
　　　　documentScrollHeight = document.documentElement.scrollHeight;
　　}
　　scrollHeight = (bodyScrollHeight - documentScrollHeight > 0) ? bodyScrollHeight : documentScrollHeight;
　　return scrollHeight;
}
//瀏覽器視口的高度
function getWindowHeight(){
　　var windowHeight = 0;
　　if(document.compatMode == "CSS1Compat"){
　　　　windowHeight = document.documentElement.clientHeight;
　　}else{
　　　　windowHeight = document.body.clientHeight;
　　}
　　return windowHeight;
}
window.onscroll = function(){
　　if(getScrollTop() + getWindowHeight() == getScrollHeight()){
　　　　alert("已經到最底部了！!");
　　}
};

jQuery寫法：

 

//jquery
$(window).scroll(function(){
　　var scrollTop = $(this).scrollTop();   
　　var scrollHeight = $(document).height();
　　var windowHeight = $(this).height();
　　if(scrollTop + windowHeight == scrollHeight){
　　　　alert("已經到最底部了！");
　　}
});