獲取瀏覽器窗口的可視區(qū)域高度和寬度,滾動(dòng)條高度有需要的朋友可參考一下。

基本邏輯如代碼茂腥，關(guān)鍵在于獲取屏幕可見(jiàn)高度的兼容性document.documentElement.clientHeight之前是這樣獲取的，PC端沒(méi)什么問(wèn)題卜壕，就是手機(jī)瀏覽器打開(kāi)時(shí)，出現(xiàn)異常烙常。網(wǎng)上查了下轴捎，最終的實(shí)現(xiàn)代碼

var h = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;

document.body.scrollTop || document.documentElement.scrollTop
 1 document.body.clientWidth ==> BODY對(duì)象寬度
 2 document.body.clientHeight ==> BODY對(duì)象高度
 3 document.documentElement.clientWidth ==> 可見(jiàn)區(qū)域?qū)挾? 4 document.documentElement.clientHeight ==> 可見(jiàn)區(qū)域高度
 5   
 6 document.body.clientWidth ==> 網(wǎng)頁(yè)可見(jiàn)區(qū)域?qū)?
 7 document.body.clientHeight ==> 網(wǎng)頁(yè)可見(jiàn)區(qū)域高
 8 document.body.offsetWidth ==> 網(wǎng)頁(yè)可見(jiàn)區(qū)域?qū)?包括邊線的寬)
 9 document.body.offsetHeight ==> 網(wǎng)頁(yè)可見(jiàn)區(qū)域高(包括邊線的高)
10 document.body.scrollWidth ==> 網(wǎng)頁(yè)正文全文寬document.body.scrollHeight ==> 網(wǎng)頁(yè)正文全文高
11 document.body.scrollTop ==> 網(wǎng)頁(yè)被卷去的高
12 document.body.scrollLeft ==> 網(wǎng)頁(yè)被卷去的左
13 window.screenTop ==> 網(wǎng)頁(yè)正文部分上
14 window.screenLeft ==> 網(wǎng)頁(yè)正文部分左
15 window.screen.height ==> 屏幕分辨率的高
16 window.screen.width ==> 屏幕可用工作區(qū)高度
17 window.screen.availHeight ==> 屏幕可用工作區(qū)高度
18 window.screen.availWidth ==> 屏幕可用工作區(qū)寬度

部分jquery函數(shù)獲取方法

1 // 部分jQuery函數(shù)  
2 $(window).height() 　              //瀏覽器時(shí)下窗口可視區(qū)域高度   
3 $(document).height()　           //瀏覽器時(shí)下窗口文檔的高度   
4 $(document.body).height()　　　　　　//瀏覽器時(shí)下窗口文檔body的高度   
5 $(document.body).outerHeight(true)　//瀏覽器時(shí)下窗口文檔body的總高度 包括border padding margin   
6 $(window).width() 　   //瀏覽器時(shí)下窗口可視區(qū)域?qū)挾?  
7 $(document).width()   //瀏覽器時(shí)下窗口文檔對(duì)于象寬度   
8 $(document.body).width()　　　　　　//瀏覽器時(shí)下窗口文檔body的高度   
9 $(document.body).outerWidth(true)　//瀏覽器時(shí)下窗口文檔body的總寬度 包括border padding  

 1 HTML精確定位:  scrollLeft,scrollWidth,clientWidth,offsetWidth   
 2 scrollHeight: 獲取對(duì)象的滾動(dòng)高度。   
 3 scrollLeft: 設(shè)置或獲取位于對(duì)象左邊界和窗口中目前可見(jiàn)內(nèi)容的最左端之間的距離   
 4 scrollTop:  設(shè)置或獲取位于對(duì)象最頂端和窗口中可見(jiàn)內(nèi)容的最頂端之間的距離   
 5 scrollWidth: 獲取對(duì)象的滾動(dòng)寬度   
 6 offsetHeight:獲取對(duì)象相對(duì)于版面或由父坐標(biāo) offsetParent 屬性指定的父坐標(biāo)的高度   
 7 offsetLeft: 獲取對(duì)象相對(duì)于版面或由 offsetParent 屬性指定的父坐標(biāo)的計(jì)算左側(cè)位置   
 8 offsetTop:  獲取對(duì)象相對(duì)于版面或由 offsetTop 屬性指定的父坐標(biāo)的計(jì)算頂端位置   
 9 event.clientX 相對(duì)文檔的水平座標(biāo)   
10 event.clientY 相對(duì)文檔的垂直座標(biāo)   
11 event.offsetX 相對(duì)容器的水平坐標(biāo)   
12 event.offsetY 相對(duì)容器的垂直坐標(biāo)   
13 document.documentElement.scrollTop 垂直方向滾動(dòng)的值   
14 event.clientX+document.documentElement.scrollTop 相對(duì)文檔的水平座標(biāo)+垂直方向滾動(dòng)的量 

alert($(document).scrollTop()); //獲取滾動(dòng)條到頂部的垂直高度
alert($(document).scrollLeft()); //獲取滾動(dòng)條到左邊的垂直寬度

image.png