Comment obtenir la position absolue d'un élément dans une zone de défilement dans jQuery?

Question

Disons que j'ai un div $container avec position: relative, et un div $foo en lui avec position: absolute. Je veux obtenir la position $foo par rapport au conteneur. jQuery rend ce facile:

$foo.position() 

qui renvoie un objet avec des propriétés top et left, spécifié en pixels. Le problème est, ce nombre n'est plus précis si le conteneur est défilé vers le bas ou vers la droite du tout. Plus précisément, cela change, alors que ce ne devrait pas être le cas. jQuery calcule position() de sorte qu'il soit équivalent à $foo.offset() - $container.offset() (où offset() indique la position relative de la fenêtre) et $foo.offset() change lorsque l'utilisateur fait défiler $container.

Answer 1

Ajouter le .scrollLeft() et .scrollTop() des $container aux valeurs renvoyées par la .position() du $foo

Cela devrait couvrir ..

Mise à jour

Pour trouver le parent relatif vous devriez utiliser ce qui suit

var $parent = $foo.parents() 
        .filter(
         function(){ 
          var position = $(this).css('position') 
          return position==='relative' || position==='absolute'; 
           } 
         ).eq(0); 

Answer 2

Il semble que vous deviez prendre $foo.position() et ensuite ajuster en ajoutant $containerscrollTop() et scrollLeft().

Cela devient ennuyeux si vous ne savez pas ce qu'est le conteneur relatif de $foo. J'ai eu recours à l'écriture d'une fonction (en CoffeeScript):

$.fn.container: -> 
    $parent: @parent() 
    if $parent.css('position') is 'relative' 
    return $parent 
    else 
    return $parent.container() 

Y at-il une façon plus directe que je donne sur? Ou un moyen direct de trouver les positions d'une barre de défilement d'un élément arbitraire?

[Mise à jour: Après avoir lu la réponse de Gaby et commentaires, je cuisinais un petit plugin jQuery qui passe par tous les parents d'un élément et ajoute leur scrollTop() et scrollLeft() à cet élément de position(). Je ne l'ai pas testé à fond, alors essayez-le et faites le moi savoir si cela fonctionne pour vous: jqPositionWithScrolling plugin

Il est un peu étrange que position() ne le fasse pas automatiquement - j'appellerais cela un bug.]