原生JS 和 JQ 獲取滾動條的高度,以及距離頂部的高度
阿新 • • 發佈:2019-02-28
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 獲取滾動條的高度,以及距離頂部的高度