Recherche de la position client décalée d'un élément

Question

Comment trouver la position cliente d’un élément en utilisant Javascript? (Je suppose que le même code peut être écrit dans un BHO ou un Gecko / NPAPI).

Le problème auquel je suis confronté est un moyen de connaître la position client décalée de l'élément. Le e.srcElement.offsetX / Y ne donne pas toujours la valeur correcte (il en va de même pour clientX / Y). Dans certains cas, nous devons également considérer le défilement de l'élément parent.

Comment fait-on cela en général? Y a-t-il un moyen simple pour cela?

Answer 1

function getElementTop ( Elem ) 
{
    var elem;

    if ( document.getElementById ) 
    {   
        elem = document.getElementById ( Elem );
    } 
    else if ( document.all ) 
    {
        elem = document.all[Elem];
    }           

    yPos = elem.offsetTop;
    tempEl = elem.offsetParent;

    while ( tempEl != null ) 
    {
        yPos += tempEl.offsetTop;
        tempEl = tempEl.offsetParent;
    }  

    return yPos;
}   


function getElementLeft ( Elem ) 
{
    var elem;

    if ( document.getElementById ) 
    {
        var elem = document.getElementById ( Elem );
    } 
    else if ( document.all )
    {
        var elem = document.all[Elem];
    }           

    xPos = elem.offsetLeft;
    tempEl = elem.offsetParent;         

    while ( tempEl != null ) 
    {
        xPos += tempEl.offsetLeft;
        tempEl = tempEl.offsetParent;
    }           
    return xPos;
}

Passez l'identifiant d'élément aux fonctions.

Answer 2

Voir le code ci-dessous:

function getOffsetSum(elem) {
    var top=0, left=0;
    while(elem) {
        top = top + parseInt(elem.offsetTop);
        left = left + parseInt(elem.offsetLeft);
        elem = elem.offsetParent;
    }
    return {top: top, left: left};
}

Answer 3

Pour inclure le défilement, jetez un coup d'œil à cet écouteur d'événements jQuery pour consigner le scrollTop et le décalage.

// Don't put this in the scroll event listener callback, or that will be unnecessarily performance intensive.
var offset = $("#id").offset().top;

$(window).bind("scroll", function() {

 console.log(
  $(window).scrollTop() + 
  offset
 );

});

Pour obtenir le décalage seul,

("#id").offset().top;

Answer 4

Version CoffeeScript de la réponse d'Orhun Alp Oral :

getOffset = (elem)->
    top = 0
    left = 0
    while elem
        top += parseInt(elem.offsetTop)
        left += parseInt(elem.offsetLeft)
        elem = elem.offsetParent
    {top, left}