zoukankan      html  css  js  c++  java
  • 原生JS 和 JQ 获取滚动条的高度,以及距离顶部的高度

    JQ:相对比较简便

    获取浏览器显示区域(可视区域)的高度 :   
    $(window).height();   
    获取浏览器显示区域(可视区域)的宽度 :
    $(window).width();   
    获取页面的文档高度   
    $(document).height();   
    获取页面的文档宽度 :
    $(document).width(); 
    浏览器当前窗口文档body的高度:  
    $(document.body).height();
    浏览器当前窗口文档body的宽度: 
    $(document.body).width();
    获取滚动条到顶部的垂直高度 (即网页被卷上去的高度)  
    $(document).scrollTop();   
    获取滚动条到左边的垂直宽度 :
    $(document).scrollLeft(); 
    获取或设置元素的宽度:
    $(obj).width();
    获取或设置元素的高度:
    $(obj).height();

     原生JS:
    document.documentElement.scrollTop //firefox
    
    document.documentElement.scrollLeft //firefox
    
    document.body.scrollTop //IE
    
    document.body.scrollLeft //IE

    像这种不兼容的获取方式,我们要做一下兼容,封装一个函数

                             function getScrollTop(){
                                                    var scroll_top = 0;
                                                    if (document.documentElement && document.documentElement.scrollTop) {//如果非IE
                                                        scroll_top = document.documentElement.scrollTop;
                                                    }
                                                    else if (document.body) {//IE浏览器
                                                        scroll_top = document.body.scrollTop;
                                                    };
                                                    return scroll_top;
                                                };

    网页工作区域的高度和宽度  

    document.documentElement.clientHeight// IE firefox  
    
    
  • 相关阅读:
    OCP-1Z0-053-V12.02-655题
    OCP-1Z0-053-V12.02-656题
    OCP-1Z0-053-V12.02-639题
    EXCEL文件打开缓慢的问题解决
    IOCP底层,支持超过15000个连接
    OCP-1Z0-053-V12.02-340题
    OCP-1Z0-053-V12.02-338题
    OCP-1Z0-053-V12.02-336题
    OCP-1Z0-053-V12.02-334题
    OCP-1Z0-053-V12.02-333题
  • 原文地址:https://www.cnblogs.com/xxflz/p/10453068.html
Copyright © 2011-2022 走看看