Ottenere posizione assoluta di un elemento relativo al browser

Question

Ho una serie div al galleggiante classe CSS con galleggiante essere:

.float { 
display:block; 
position:fixed; 
top: 20px; 
left: 0px; 
z-index: 1999999999; 
} 
* html .float {position:absolute;} 

Questa classe fa sì che l'elemento di rimanere in una posizione fissa sulla pagina (la * la parte html è far funzionare in IE). Sto usando javascript per spostare la posizione dell'elemento orizzontalmente e verticalmente.

Ho bisogno di ottenere la posizione assoluta del div relativo alla finestra del browser in javascript (quanti pixel dalla parte superiore e dalla parte sinistra della finestra del browser è div). In questo momento, sto usando il seguente:

pos_left = document.getElementById('container').offsetLeft; 
pos_top = document.getElementById('container').offsetTop; 

Il codice precedente funziona per IE, Chrome, e FF, ma in Opera restituisce 0 per entrambi. Ho bisogno di una soluzione che funzioni per tutti quei browser. Qualche idea?

Btw: È possibile tenere traccia delle modifiche apportate da javascript, ma questa non è la soluzione che sto cercando a causa di motivi di prestazioni. Inoltre, sono non utilizzando jquery.

Answer 1

Se è possibile utilizzare elementi stile elemento;

<div id="container" style="top: 20px;left: 0px;z-index: 1999999999;"> 

È possibile ottenerlo con l'attributo stile elemento;

var top = parseInt(document.getElementById('container').style.top.split('px')[0], 10); // This row returns 20 

È possibile utilizzare superiore, sinistro, larghezza, altezza, ecc ...

Answer 2

Si possono trovare indizi qui: http://code.google.com/p/doctype/wiki/ArticlePageOffset ma credo che sarà necessario aggiungere gli offset dei genitori di avere il giusto valore.

Answer 3

Ho avuto una domanda simile prima, e guardando attraverso i blog, i siti web e questa soluzione da StackOverflow, ho capito che non esiste una soluzione adatta a tutte le soluzioni! Quindi, senza ulteriori indugi, ecco cosa ho messo insieme che ottiene la x, y di qualsiasi elemento attraverso qualsiasi nodo genitore, inclusi iframe, scrolling di div e qualsiasi cosa! Qui ya go:

function findPos(obj) { 
    var curleft = 0; 
    var curtop = 0; 
    if(obj.offsetLeft) curleft += parseInt(obj.offsetLeft); 
    if(obj.offsetTop) curtop += parseInt(obj.offsetTop); 
    if(obj.scrollTop && obj.scrollTop > 0) curtop -= parseInt(obj.scrollTop); 
    if(obj.offsetParent) { 
     var pos = findPos(obj.offsetParent); 
     curleft += pos[0]; 
     curtop += pos[1]; 
    } else if(obj.ownerDocument) { 
     var thewindow = obj.ownerDocument.defaultView; 
     if(!thewindow && obj.ownerDocument.parentWindow) 
      thewindow = obj.ownerDocument.parentWindow; 
     if(thewindow) { 
      if(thewindow.frameElement) { 
       var pos = findPos(thewindow.frameElement); 
       curleft += pos[0]; 
       curtop += pos[1]; 
      } 
     } 
    } 

    return [curleft,curtop]; 
} 

Answer 4

Io lo uso per PhantomJS rasterizzazione:

function getClipRect(obj) { 
    if (typeof obj === 'string') 
    obj = document.querySelector(obj); 

    var curleft = 0; 
    var curtop = 0; 

    var findPos = function(obj) { 
    curleft += obj.offsetLeft; 
    curtop += obj.offsetTop; 
    if(obj.offsetParent) { 
     findPos(obj.offsetParent); 
    } 
    } 
    findPos(obj); 

    return { 
    top: curtop, 
    left: curleft, 
    width: obj.offsetWidth, 
    height: obj.offsetHeight 
    }; 
} 

Answer 5

Una variante di risposta di user1988451 che ho testato cross-browser. Ho trovato che la loro risposta non riguardava la larghezza dello scorrimento (quindi ho aggiunto il controllo per obj.scrollLeft), e mi sono comportato in modo diverso in FF e Chrome fino a quando ho aggiunto i controlli per thewindow.scrollY e thewindow.scrollX. Testato su Chrome, IE, Safari, Opera, FF, IE 9-10 e IE9 con 8 e 7 modalità. Si prega di notare che non ho ancora testato il suo comportamento con gli iframe:

function findPos(obj, foundScrollLeft, foundScrollTop) { 
    var curleft = 0; 
    var curtop = 0; 
    if(obj.offsetLeft) curleft += parseInt(obj.offsetLeft); 
    if(obj.offsetTop) curtop += parseInt(obj.offsetTop); 
    if(obj.scrollTop && obj.scrollTop > 0) { 
     curtop -= parseInt(obj.scrollTop); 
     foundScrollTop = true; 
    } 
    if(obj.scrollLeft && obj.scrollLeft > 0) { 
     curleft -= parseInt(obj.scrollLeft); 
     foundScrollLeft = true; 
    } 
    if(obj.offsetParent) { 
     var pos = findPos(obj.offsetParent, foundScrollLeft, foundScrollTop); 
     curleft += pos[0]; 
     curtop += pos[1]; 
    } else if(obj.ownerDocument) { 
     var thewindow = obj.ownerDocument.defaultView; 
     if(!thewindow && obj.ownerDocument.parentWindow) 
      thewindow = obj.ownerDocument.parentWindow; 
     if(thewindow) { 
      if (!foundScrollTop && thewindow.scrollY && thewindow.scrollY > 0) curtop -= parseInt(thewindow.scrollY); 
      if (!foundScrollLeft && thewindow.scrollX && thewindow.scrollX > 0) curleft -= parseInt(thewindow.scrollX); 
      if(thewindow.frameElement) { 
       var pos = findPos(thewindow.frameElement); 
       curleft += pos[0]; 
       curtop += pos[1]; 
      } 
     } 
    } 

    return [curleft,curtop]; 
}