原生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  

猜你喜欢

转载自www.cnblogs.com/xxflz/p/10453068.html