原生JS 和 JQ 获取滚动条的高度，以及距离顶部的高度

Posted 2021-02-11 尼古拉斯-富贵

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