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

java哥 阅读:325 2022-02-10 13:23:47 评论:0

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; 
}

标签:JavaScript
声明

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

搜索
排行榜
关注我们

一个IT知识分享的公众号