JavaScript获取与操作窗口属性

一、查看滚动条的滚动距离

常用属性： window.pageXOffset/pageYOffset

IE8及IE8以下不同时兼容 document.body.scrollLeft/scrollTop 和 documentElement.scrollLeft/scrollTop ，兼容性比较混乱，用时取两个值相加。因为有个规律是一个有值另一个就为0；

以下为获取滚动条滚动距离的兼容性函数

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

二、查看视口的尺寸

window.innerWidth/innerHeight （加上 滚动条宽度 / 高度） IE8及IE8以下不兼容

document.documentElement.clientWidth/clientHeight 标准模式下，任意浏览器都兼容

document.body.clientWidth/clientHeight 适用于怪异模式下的浏览器

以下为查看视口的尺寸的兼容性函数

//获取页面窗口大小的兼容性函数
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
			}
		}
	}
}

查看元素的尺寸

dom.offsetWidth，dom.offsetHeight

domEle.getBoundingClientRect(); 兼容性很好 该方法返回一个对象，对象里面有left,top,right,bottom等属性。left和top代表该元素左上角的X和Y坐标，right和bottom代表元素右下角的X和Y坐标 height和width属性。老版本IE并未实现。 注意：返回的结果并不是“实时的”

查看元素的位置

dom.offsetLeft, dom.offsetTop 对于无定位父级的元素，返回相对文档的坐标。对于有定位父级的元素，返回相对于最近的有定位的父级的坐标。(无论是 left 还是margin-left等都是距离。 )

dom.offsetParent 返回最近的有定位的父级，如无，返回body, body.offsetParent 返回null

让滚动条滚动

window上有三个方法 scroll(),scrollTo(),scrollBy();

三个方法功能类似，用法都是将x,y坐标传入。即实现让滚动轮滚动到当前位置。

区别：scrollBy()会在之前的数据基础之上做累加。