滾動條的滾動距離

window.pageXOffset 屬性返回頁面的水平滾動距離，
window.pageYOffset 屬性返回頁面的垂直滾動距離，單位都為畫素。這兩個屬性只讀。
（相容性：IE8及IE8以下不相容）

別名：
window.scrollX 、window.scrollY

IE8及IE8以下 瀏覽器可使用
document.body.scrollLeft 、document.body.scrollTop
或
document.documentElement.scrollLeft 、document.documentElement.scrollTop
相容性混亂，但因兩組屬性不會同時存在，當其中一組存在，另一組的值則為 0

//IE8及IE8以下 瀏覽器可使用
var scrollLeft = document.body.scrollLeft + document.documentElement.srollLeft ;
var scrollTop = document.body.scrollTop + document.documentElement.srollTop ;

封裝相容性方法：

function getScrollOffset(){
	if (window.pageXOffset != undefined) {
		return {
			x : window.
 
pageXOffset,
			y : window.pageYOffset
		}
	}else{
		return {
			x : document.body.scrollLeft + document.documentElement.srollLeft,
			y : document.body.scrollTop + document.documentElement.srollTop
		}
	}
}

滾動條滾動
window上有三個方法
1、window.scroll() 跟 window.scrollTo() 相同
2、 window.scrollBy()
三個方法功能類似，用法都是將X、Y座標傳入，實現讓滾動條滾動到當前位置。區別是scrollBy()

可視區視窗尺寸

window.innerWidth 和 window.innerHeight 屬性，返回網頁在當前視窗中可見部分的寬度和高度，即“視口”（viewport）的大小（單位畫素）。這兩個屬性只讀。
（相容性：IE8及IE8以下不兼）

document.documentElement.clientWidth 、document.documentElement.clientHeight （標準模式下，任意瀏覽器都相容）

document.body.clientWidth 、document.body.clientHeight （適用於怪異模式下的瀏覽器）

封裝相容性方法：

function getViewport(){
	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）Element.getBoundingClientRect方法返回一個物件，提供當前元素節點的大小、位置等資訊，基本上就是 CSS 盒狀模型的所有資訊。
x：元素左上角相對於視口的橫座標
y：元素左上角相對於視口的縱座標
width：元素寬度
height：元素高度
left：元素左上角相對於視口的橫座標，與x屬性相等
right：元素右邊界相對於視口的橫座標（等於x + width）
top：元素頂部相對於視口的縱座標，與y屬性相等
bottom：元素底部相對於視口的縱座標（等於y + height）

由於元素相對於視口（viewport）的位置，會隨著頁面滾動變化，因此表示位置的四個屬性值，都不是固定不變的。如果想得到絕對位置，可以將left屬性加上window.scrollX，top屬性加上window.scrollY。

注意，getBoundingClientRect方法的所有屬性，都把邊框（border屬性）算作元素的一部分。也就是說，都是從邊框外緣的各個點來計算。因此，width和height包括了元素本身 + padding + border。

老版本IE沒有height和width屬性
返回的結果並不是“實時的”

（2）其他元素節點屬性
檢視元素的尺寸
Element.clientHeight，Element.clientWidth
Element.clientHeight屬性返回一個整數值，表示元素節點的 CSS 高度（單位畫素），只對塊級元素生效，對於行內元素返回0。如果塊級元素沒有設定 CSS 高度，則返回實際高度。
除了元素本身的高度，它還包括padding部分，但是不包括border、margin。如果有水平滾動條，還要減去水平滾動條的高度。注意，這個值始終是整數，如果是小數會被四捨五入。
Element.clientWidth屬性返回元素節點的 CSS 寬度，同樣只對塊級元素有效，也是隻包括元素本身的寬度和padding，如果有垂直滾動條，還要減去垂直滾動條的寬度。

Element.offsetHeight，Element.offsetWidth
Element.offsetHeight屬性返回一個整數，表示元素的 CSS 垂直高度（單位畫素），包括元素本身的高度、padding 和 border，以及水平滾動條的高度（如果存在滾動條）。
Element.offsetWidth屬性表示元素的 CSS 水平寬度（單位畫素），其他都與Element.offsetHeight一致。
這兩個屬性都是隻讀屬性。如果元素的 CSS 設為不可見（比如display: none;），則返回0。
檢視元素的位置
Element.offsetLeft，Element.offsetTop
Element.offsetLeft返回當前元素左上角相對於Element.offsetParent節點的水平位移，Element.offsetTop返回垂直位移，單位為畫素。
對於無定位父級的元素，返回相對文件的座標。對於有定位的父級元素，返回相對於最近的有定位的父級的座標。
Element.offsetParent
返回最近的有定位的父級，如無，返回body,body.offsetParent返回null