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


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

     1 //获取窗口可视范围的高度
     2 function getClientHeight(){  
     3     var clientHeight=0;  
     4     if(document.body.clientHeight&&document.documentElement.clientHeight){  
     5         var clientHeight=(document.body.clientHeight<document.documentElement.clientHeight)?document.body.clientHeight:document.documentElement.clientHeight;
     6     }else{  
     7         var clientHeight=(document.body.clientHeight>document.documentElement.clientHeight)?document.body.clientHeight:document.documentElement.clientHeight;
     8     }  
     9     return clientHeight;  
    10 }

    2.获取窗口滚动条高度

    1 function getScrollTop(){  
    2     var scrollTop=0;  
    3     if(document.documentElement&&document.documentElement.scrollTop){  
    4         scrollTop=document.documentElement.scrollTop;  
    5     }else if(document.body){  
    6         scrollTop=document.body.scrollTop;  
    7     }  
    8     return scrollTop;  
    9 }

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

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

    4.使用方法

     1 window.onscroll=function(){
     2     // 窗口可视范围的高度
     3     var height=getClientHeight(),
     4         // 窗口滚动条高度
     5         theight=getScrollTop(),
     6         // 窗口可视范围的高度
     7         rheight=getScrollHeight(),
     8         // 滚动条距离底部的高度
     9         bheight=rheight-theight-height;
    10         
    11     document.getElementById('show').innerHTML='此时浏览器可见区域高度为:'+height+'<br />此时文档内容实际高度为:'+rheight+'<br />此时滚动条距离顶部的高度为:'+theight+'<br />此时滚动条距离底部的高度为:'+bheight;
    12 }
  • 相关阅读:
    this和e.target的异同
    onmouseover和onmouseenter区别
    jquery带参插件函数的编写
    让bind函数支持IE8浏览器的方法
    LeetCode #9 Palindrome Number
    LeetCode #7 Reverse Integer
    LeetCode #1 Two Sum
    iOS 真机测试错误“The application bundle does not contain a valid identifier”
    Swift、Objective-C 单例模式 (Singleton)
    iOS 相册和网络图片的存取
  • 原文地址:https://www.cnblogs.com/chuangzi/p/6985281.html
Copyright © 2020-2023  润新知