bom初步學習

一、檢視滾動條得滾動距離：

1、windows.pageXOffset/pageYOffset（IE8及IE8以下不相容）

2、document.body/documentElement.scrollLeft/scrollTop(相容性比較混亂)

IE8和IE8以下的浏覽器：

（1）document.body.scrollLeft/Top

（2）document.documentElement.scorllLeft/Top

因為（1）（2）的相容性是互斥的，是以采用（1）+（2）的方法解決問題。

相對應的解決問題的代碼：

function getScrollOffset(){
			if(window.pageXOffset){
				return{
					x:windows.pageXOffset,
					y:windows.pageYOffset
				}
			}
				else{
					return{
						x:document.body.scrollleft+document.documentElement.scrollLeft,
						y:document.body.scrollTop+document.documentElement.scrollTop
					}
				}
			}

           

二、檢視可視區視窗的尺寸

1、window.innerWidth/window.innerHeight （IE8及IE8以下不相容）

2、document.documentElement.clientWidth/clientHeight（标準模式下，任何浏覽器都相容）

3、document.body.clientWidth/clientHeight(适用于怪異模式下的浏覽器)

4、封裝相容性方法，傳回浏覽器尺寸getViewportOffset（）

附：怪異模式/混雜模式 和 标準模式 問題

判斷：document.compatMode：（1）CSS1Compat；（2）BackCompat。

檢視可視區視窗的尺寸：

function getViewportOffset(){
				if(window.innerWidth){
					return{
						w : window.innerWidth,
						h : window.innerHeight
					}
				}else{
					if(document.compatMode==="BackCompat"){
						return{
							w : document.body.clientWidth,
							h : document.body.clientHeight
						}
					}else{
						return{
							w : document.documentElement.clientWidth,
							h : document.documentElement.clientHeight
						}
					}
				}
			}
           

三、檢視元素的幾何尺寸

1、domEle.getBoundingClientRect();

2、相容性很好

3、該方法傳回一個對象，對象裡面有left，top，right，bottom等屬性。left和top代表該元素左上角的x和y坐标，right和bottom代表元素右下角的x和y坐标（即四條邊距邊的距離）

4、height和width屬性老版本IE并未實作

5、傳回的結果并不是“實時的”

四、檢視元素的（視覺上的）尺寸

1、dom.offsetWidth，dom.offsetHeight

五、檢視元素的位置

1、dom.offsetLeft，dom.offsetTop

對于無定位父級的元素，傳回相對于文檔的坐标。對于有定位父級傳回相對于最近的有定位的父級的坐标。

2、dom.offsetParent

傳回最近的有定位的父級，如無，傳回body，body.offsetParent傳回null

六、讓滾動條滾動

1、window上有三個方法

（1）scroll（）；

（2）scrollTo（）；

（3） scrollBy（）；

三個方法功能類似，用法都是将x，y坐标傳入。即實作讓滾動輪滾動到目前位置。

差別：前兩者沒有任何差別，且都不會累加，而scrollBy（）會在之前的資料基礎之上做累加。