zoukankan      html  css  js  c++  java
  • 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;
    }
  • 相关阅读:
    [转]在C#中使用异步Socket编程实现TCP网络服务的C/S的通讯构架(一)
    Ubuntu操作系统安装使用教程 转载
    ArcInfo和MapInfo的比较 转 http://www.cnblogs.com/njnudt/archive/2007/07/18/821974.html
    jxl导出excel
    flex 图表
    telnet/ssh基本知识
    flex 判断数据类型的几种方法
    友人记
    16进制颜色表
    Ajax不能提交excel
  • 原文地址:https://www.cnblogs.com/iyitong/p/4688200.html
Copyright © 2011-2022 走看看