鼠标位置

• page：pageX、pageY，当前鼠标距离页面的横纵坐标
• client: clientX、clientY，鼠标相对于视口的坐标
• offset：offsetX、offsetY，鼠标相对于事件源 padding-box 的坐标
• screen: screenX、screenY，鼠标相对于屏幕
• x、y，等同于 clientX、clientY
• movement：movementX、movementY，只在鼠标移动事件中有效，相对于上一次鼠标位置，偏移的距离

滚动条

• scrollTop：获取或设置 DOM 元素的竖向滚动条距离

• scrollLeft：获取或设置 DOM 元素横向滚动条的距离

• 如果要获取整个网页，要么获取 document.documentElement，要么获取 document.body

• window.scrollX, window.pageXOffset：相当于根元素的 scrollLeft

• window.scrollY, window.pageYOffset：相当于根元素的 scrollTop

• scrollTo()：任何 DOM 对象都可以用，传入两个参数，设置滚动条的绝对位置。

• scrollBy()：任何 DOM 对象都可以用，传入两个参数，在原来的基础上增加多少。

窗口尺寸

DOM 尺寸

DOM 位置

• offsetParent：每一个元素都有这个属性，这个属性可以用于获取某个元素第一个定位的祖先元素，如果没有会得到 body，body 的 offsetParent 为 null
• offsetLeft ＆offsetTop：相对于该元素的 offsetParent 的坐标，注意，如果 offsetParent 是 body，则相对于整个网页，即考虑 body 的 margin 值。

//获取一个元素基于页面的位置
function getPagePosition(dom){
	if(!dom){
		return {};
	}
	var left = 0;
	var top = 0;
	while(dom){
		left += dom.offsetLeft;
		top += dom.offsetTop;
		dom = dom.offsetParent;
	}
	return {
		left:left,
		top:top,
	};
}

• getBoundingClientRect() ：该方法可以的得到一个对象，该对象记录了当前元素基于视口的位置，如下图所示