js怎么获取一个元素在屏幕上的位置呢

Question

就是元素相对于屏幕左边和顶边的距离，

不管这个元素是不是脱离了文档流或者页面是不是有卷动，

怎么能正确获取到呢？

我现在用的offsetTop和offsetLeft有点问题，页面卷动就不行了

Answer 1

调用 dom.getBoundingClientRect() 获取。

Answer 2

// 兼容低版本IE
// 转换为数字 
function intval(v) {
    v = parseInt(v);
    return isNaN(v) ? 0 : v;
}

function getPos(e) {
    // left and top value
    var left = 0;
    var top = 0;

    // offsetParent返回一个指向最近的定位元素,标准模式如果没有就返回html/body,表示迁移量都是相对其中来计算.
    while (e.offsetParent) {
        // 计算偏移量
        left += e.offsetLeft + (e.currentStyle ? intval(e.currentStyle.borderLeftWidth) : 0);
        top += e.offsetTop + (e.currentStyle ? intval(e.currentStyle.borderTopWidth) : 0);

        // 最近的定位元素或者body
        e = e.offsetParent;
    }

    left += e.offsetLeft + (e.currentStyle ? intval(e.currentStyle.borderLeftWidth) : 0);
    top += e.offsetTop + (e.currentStyle ? intval(e.currentStyle.borderTopWidth) : 0);

    return {
        x: left,
        y: top
    };
}

document.addEventListener('mousemove', function(e) {
    // 即便滚动条再怎么动也不会影响目标DOM距离顶部的距离
    console.log(getPos(document.querySelector('.footer')))
})