1. 程式人生 > >原生JS 和 JQ 獲取滾動條的高度,以及距離頂部的高度

原生JS 和 JQ 獲取滾動條的高度,以及距離頂部的高度

scrolltop 距離 amp col get div 比較 高度 var

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  

原生JS 和 JQ 獲取滾動條的高度,以及距離頂部的高度