js获取窗口滚动条高度、窗口可视范围高度、文档实际内容高度、滚动条离浏览器底部的高度

在做滚动获取更多的这个需求中,我们需要获取到滚动条高度、窗口可视范围高度、文档实际内容高度、滚动条离浏览器底部的高度。

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;
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,816评论 1 92
  • HTML标签解释大全 一、HTML标记 标签:!DOCTYPE 说明:指定了 HTML 文档遵循的文档类型定义(D...
    米塔塔阅读 3,331评论 1 41
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 173,687评论 25 708
  • 小时候的世界就是一个镇那么大,以为每个地方的人都跟我们过着一样的生活,有一样的风俗,慢慢的长大后才发现,中国文化博...
    不正J阅读 355评论 2 1
  • 致 ——给对顾客充满傲娇与偏见的卖家 从未知的岁月旅途中 记不清曾有几次购物 星零几行字 充斥 排解 心中有冥的火...
    努力挣扎的小骚猪阅读 297评论 2 0