代码改变世界

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

  youxin  阅读(4213)  评论(0)  编辑  收藏  举报

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

 

编辑推荐：
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识（上）
· 浏览器原生「磁吸」效果！Anchor Positioning 锚点定位神器解析
· 没有源码，如何修改代码逻辑？
阅读排行：
· 全程不用写代码，我用AI程序员写了一个飞机大战
· DeepSeek 开源周回顾「GitHub 热点速览」
· 记一次.NET内存居高不下排查解决与启示
· MongoDB 8.0这个新功能碉堡了，比商业数据库还牛
· .NET10 - 预览版1新功能体验（一）
点击右上角即可分享
微信分享提示
AI FOR CODE 大赛