web-dev-qa-db-fra.com

Position de Div par rapport au sommet de la fenêtre

Je me demande comment obtenir le nombre de pixels (ou la mesure en général) d'un div en haut de la fenêtre en Javascript. Je ne recherche pas un décalage y par rapport au document, simplement vers le haut de l'emplacement d'affichage du navigateur. J'ai essayé la solution "répondue" ici: Est-il possible d'obtenir la position de div dans la fenêtre du navigateur? Pas dans le document. Dans la fenêtre , mais au moins dans Safari, je rencontre un problème où il renvoie le même nombre, peu importe où se trouvent réellement les div.

Merci pour toute aide!

javascripthtmlbrowserpixel
37
PF1

Les réponses existantes sont désormais obsolètes. La méthode getBoundingClientRect() existe depuis un certain temps maintenant et fait exactement ce que cette question demande. De plus, il est pris en charge par tous les navigateurs.

De la page this MDN:

La valeur renvoyée est un objet TextRectangle, qui contient des propriétés en lecture seule gauche, haut, droite et bas décrivant la zone de bordure, en pixels, avec le coin supérieur gauche par rapport à en haut à gauche de la fenêtre .

Vous l'utilisez comme ceci:

var viewportOffset = el.getBoundingClientRect();
// these are relative to the viewport
var top = viewportOffset.top;
var left = viewportOffset.left;
72
Himanshu P

// Obtenez d'abord la géométrie correcte pour le navigateur

(function(){
 Run= window.Run || {};
 if(window.pageYOffset!= undefined){
  Run.topLeftScroll= function(hoo){
   var wo= [window.pageXOffset, window.pageYOffset]
   if(hoo && hoo.nodeType== 1){
    hoo= mr(hoo);
    var T= 0, L= 0;
    while(hoo){
     L+= hoo.offsetLeft;
     T+= hoo.offsetTop;
     hoo= hoo.offsetParent;
    }
    wo= [L, T, wo[0], wo[1]];
   }
   return wo;
  }
 }
 else if(document.body.scrollTop!== undefined){
  Run.topLeftScroll= function(hoo){
   var B= document.body;
   var D= document.documentElement;
   D= (D.clientHeight)? D: B;
   wo= [D.scrollLeft, D.scrollTop];
   if(hoo && hoo.nodeType== 1){
    hoo= mr(hoo);
    var T= 0, L= 0;
    while(hoo){
     L+= hoo.offsetLeft;
     T+= hoo.offsetTop;
     hoo= hoo.offsetParent;
    }
    wo= [L, T, wo[0], wo[1]];
   }
   return wo;
  }
 }
})()

// fonction de raccourci

if(window.Run && Run.topLeftScroll){
 Run.getPosition= function(who, wch){
  var A= Run.topLeftScroll(who);
  if(!wch) return A;
  switch(wch.toUpperCase()){
   case 'X': return A[0];// element Left in document
   case 'Y': return A[1];// element Top in document
   case 'L': return A[0]-A[2];// Left minus scroll
   case 'T': return A[1]-A[3];// Top minus scroll
   case 'SL': return A[2];// scroll Left
   case 'ST': return A[3];// scroll Top
   default: return 0;
  }
  // all returns are integers (pixels)
 }
}
2
kennebec

Découvrez ce que les cadres JS ont à offrir. Généralement, ils ont résolu tous - ou du moins la plupart - des problèmes et des spécialités spécifiques au navigateur.

Dans Prototype, il y a les fonctions scrollOffset () . Je ne connais pas assez JQuery pour vous diriger vers la bonne page de manuel mais ici est une question qui semble aller dans la bonne direction.

0
Pekka