javascript - Hvordan få en elements topposisjon i forhold til nettleserens viewport?

Jeg vil få posisjonen til et element i forhold til nettleserens visningsområde (visningsområdet der siden vises, ikke hele siden). Hvordan kan dette gjøres i JavaScript?

Mange takk

Svar #1

De eksisterende svarene er nå utdaterte. Den innebygde getBoundingClientRect()-metoden har eksistert en god stund nå, og gjør akkurat det spørsmålet ber om. I tillegg støttes den i alle nettlesere (inkludert IE 5, ser det ut til!)

Fra MDN-side:

Den returnerte verdien er et TextRectangle-objekt, som inneholder skrivebeskyttede left, top, right og bottom-egenskaper som beskriver border-boksen, i piksler, med øverste venstre relativt til øverste venstre hjørne av visningsområdet.

Du bruker det slik:

var viewportOffset = el.getBoundingClientRect();
// these are relative to the viewport, i.e. the window
var top = viewportOffset.top;
var left = viewportOffset.left;

Svar #2

I mitt tilfelle, bare for å være sikker når det gjelder scrolling, la jeg til window.scroll i ligningen:

var element = document.getElementById('myElement');
var topPos = element.getBoundingClientRect().top + window.scrollY;
var leftPos = element.getBoundingClientRect().left + window.scrollX;

Det lar meg få den faktiske relative posisjonen til elementet på dokumentet, selv om det har blitt rullet.

Svar #3

var element =  document.querySelector('selector');
var bodyRect = document.body.getBoundingClientRect(),
    elemRect = element.getBoundingClientRect(),
    offset   = elemRect.top - bodyRect.top;

Svar #4

Rediger: Legg til litt kode for å ta hensyn til at siden ruller.

function findPos(id) {
    var node = document.getElementById(id);     
    var curtop = 0;
    var curtopscroll = 0;
    if (node.offsetParent) {
        do {
            curtop += node.offsetTop;
            curtopscroll += node.offsetParent ? node.offsetParent.scrollTop : 0;
        } while (node = node.offsetParent);

        alert(curtop - curtopscroll);
    }
}

Argumentet id er id-en til elementet hvis offset du ønsker. Tilpasset fra et innlegg på QuirksMode.

Svar #5

jQuery implementerer dette ganske elegant. Hvis du ser på koden for jQuerys offset, vil du finne at dette i utgangspunktet er hvordan det er implementert:

var rect = elem.getBoundingClientRect();
var win = elem.ownerDocument.defaultView;

return {
    top: rect.top + win.pageYOffset,
    left: rect.left + win.pageXOffset
};

Relaterte artikler