javascript判斷滾動到窗口的底部：
window.onscroll=function(){ var sHeight=document.documentElement.scrollTop||document.body.scrollTop;//滾動高度 var wHeight=document.documentElement.clientHeight;//window var dHeight=document.documentElement.offsetHeight;//整個文檔高度 if(dHeight-(sHeight+wHeight)<100) { loading(); } };
第一個后面的主要是為了ie：
一個判斷滾動條是否滾動到底部的js。實際運用可以把clientHeight和scrollHeight放在方法外面，因為這兩個值是不變的，沒必要每次都進行計算。IE，FF，Opera，Chrome，Safari均可用。 function reachBottom() { var scrollTop = 0; var clientHeight = 0; var scrollHeight = 0; if (document.documentElement && document.documentElement.scrollTop) { scrollTop = document.documentElement.scrollTop; } else if (document.body) { scrollTop = document.body.scrollTop; } if (document.body.clientHeight && document.documentElement.clientHeight) { clientHeight = (document.body.clientHeight < document.documentElement.clientHeight) ? document.body.clientHeight: document.documentElement.clientHeight; } else { clientHeight = (document.body.clientHeight > document.documentElement.clientHeight) ? document.body.clientHeight: document.documentElement.clientHeight; } scrollHeight = Math.max(document.body.scrollHeight, document.documentElement.scrollHeight); if (scrollTop + clientHeight == scrollHeight) { return true; } else { return false; } }
jquery 判斷是否到底：
body{ height:900px; } </style> <script type="text/javascript"> $(function(){ var i=0; $("#div").append($(document).height()+' '+$(window).height()+' '+$(document).scrollTop()+"<br/>"); $(window).scroll(function(){ i++; $("#div").append(i+' '+$(document).height()+' '+$(window).height()+' '+$(document).scrollTop()+"<br/>"); console.log( $(document).height()+' '+$(window).height()+' '+$(document).scrollTop()); if( $(document).height() -( $(window).height()+$(document).scrollTop() )<50 ) { alert("到底了"); } }); });
測試：
body設置為900px； 沒滾動時顯示
document.height window.height scrollTop
929 643 0
body設置1000，顯示
1029 643 0
643是我window的高度，即可以顯示的區域。
可以利用上面的代碼進行多次測試。
判斷div內的div是否滾動到底部：
<script type="text/javascript"> window.onload=function(){ var obj=document.getElementById("div1"); obj.onscroll=function() { console.log(obj.scrollHeight+' '+obj.scrollTop+' '+obj.style.height+"<br/>"); if(obj.scrollHeight-(obj.scrollTop+parseInt(obj.style.height))<20 ) { alert("到底了"); } } }; </script> </head> <body> <div id="div1" style="width:500px;height:400px;border:2px solid red;overflow:auto;">//外部用overflow <div style="height:900px;width:100%;"> hello hello hello hello hellohello hello hello hello hellohello hello hello hello hellohello hello hello hello hellohello hello hello hello hellohello hello hello hello hellohello hello hello hello hellohello hello hello hello hellohello hello hello hello hellohello hello hello hello hellohello hello hello hello </div> </div> </div> </body>
剛開始輸出是：
900 0 400px; 主要obj.style.height輸出的是px
中間的向下滾動時增大，其他2個不變。
還可以參考以前的:
http://www.cnblogs.com/youxin/archive/2013/03/02/2940305.html