首頁(yè) 猿問(wèn) js怎么獲取一個(gè)元素在屏幕上的位置呢

js怎么獲取一個(gè)元素在屏幕上的位置呢

JavaScript

慕工程0101907 2019-03-03 14:32:31

就是元素相對(duì)于屏幕左邊和頂邊的距離，不管這個(gè)元素是不是脫離了文檔流或者頁(yè)面是不是有卷動(dòng)，怎么能正確獲取到呢？我現(xiàn)在用的offsetTop和offsetLeft有點(diǎn)問(wèn)題，頁(yè)面卷動(dòng)就不行了

查看完整描述

2 回答

慕碼人8056858

TA貢獻(xiàn)1803條經(jīng)驗(yàn) 獲得超6個(gè)贊

// 兼容低版本IE// 轉(zhuǎn)換為數(shù)字 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返回一個(gè)指向最近的定位元素,標(biāo)準(zhǔn)模式如果沒(méi)有就返回html/body,表示遷移量都是相對(duì)其中來(lái)計(jì)算.
    while (e.offsetParent) {        // 計(jì)算偏移量
        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) {    // 即便滾動(dòng)條再怎么動(dòng)也不會(huì)影響目標(biāo)DOM距離頂部的距離
    console.log(getPos(document.querySelector('.footer')))
})

反對(duì) 回復(fù) 2019-03-03