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  
    
    
  • 相关阅读:
    jq 京东跳楼效果
    *Sum of NestedInteger
    **Minimum Window Substring & String类问题模板
    **Word Ladder
    *Longest Increasing Subsequence
    *Kth Largest Element in an Array
    *Permutations II
    *Implement Stack using Queues
    *Paint House II
    *Paint Fence
  • 原文地址:https://www.cnblogs.com/xxflz/p/10453068.html
Copyright © 2011-2022 走看看