JS获取位置、滚动条、尺寸的总结

鼠标位置

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() ：该方法可以的得到一个对象，该对象记录了当前元素基于视口的位置，如下图所示