（十）JavaScript 窗口属性（滚动条的滚动距离、可视区窗口尺寸、元素的几何尺寸）

滚动条的滚动距离

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以下的浏览器。

//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