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