javascript和Jquery判断是否滚动到底部

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="500px;height:400px;border:2px solid red;overflow:auto;">//外部用overflow

     <div style="height:900px;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