鼠标位置
- 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 {};
}
let left = 0;
let top = 0;
while(dom){
left += dom.offsetLeft;
top += dom.offsetTop;
dom = dom.offsetParent;
}
return {
left,
top,
};
}
getBoundingClientRect()：该方法可以的得到一个对象，该对象记录了当前元素基于视口的位置，如下图所示
