判断页面是否滚动到底部

来源:互联网 发布:java 精确毫秒后6位 编辑:程序博客网 时间:2024/05/24 06:50
var isPageBottom=function () {  
    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;  
    }
    // 知识点:Math.max 比较大小,取最大值返回
    scrollHeight = Math.max(document.body.scrollHeight, document.documentElement.scrollHeight);  
    if (scrollTop + clientHeight+633 >= scrollHeight) {  
        return true;  
    } else {  
        return false;  
    }  
}
isPageBottom()

 函数解释

1.获取窗口可视范围的高度

复制代码
//获取窗口可视范围的高度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;  }
复制代码

2.获取窗口滚动条高度

复制代码
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;  }
复制代码

3.获取文档内容实际高度

function getScrollHeight(){      return Math.max(document.body.scrollHeight,document.documentElement.scrollHeight);  }

4.使用方法

复制代码
window.onscroll=function(){    // 窗口可视范围的高度    var height=getClientHeight(),        // 窗口滚动条高度        theight=getScrollTop(),        // 窗口可视范围的高度        rheight=getScrollHeight(),        // 滚动条距离底部的高度        bheight=rheight-theight-height;            document.getElementById('show').innerHTML='此时浏览器可见区域高度为:'+height+'<br />此时文档内容实际高度为:'+rheight+'<br />此时滚动条距离顶部的高度为:'+theight+'<br />此时滚动条距离底部的高度为:'+bheight;}

0 0
原创粉丝点击