web-dev-qa-db-fra.com

Trouver la distance entre l'élément HTML et les côtés du navigateur (ou de la fenêtre)

Comment trouver la distance en pixels entre l'élément html et l'un des côtés du navigateur (ou de la fenêtre) (gauche ou haut) en utilisant jQuery?

javascriptjqueryhtmlpositiondistance
47
Kai

Vous pouvez utiliser la fonction offset pour cela. Il vous donne la position de l'élément par rapport au (gauche, haut) du document :

var offset = $("#target").offset();
display("span is at " + offset.left + "," + offset.top + 
  " of document");

exemple en direct Sur mon navigateur, cet exemple indique que la durée que nous avons ciblée est à 157,47 (gauche, haut) du document. Cela est dû au fait que j'ai appliqué une grande valeur de remplissage à l'élément body, et utilisé une étendue avec un espaceur au-dessus et du texte devant.

Voici un deuxième exemple montrant un paragraphe en haut à gauche, en haut du document, en indiquant 0,0 comme position (et en montrant plus tard une plage décalée à gauche et en haut, 129, 19 sur mon navigateur).

47
T.J. Crowder

jQuery.offset doit être combiné avec scrollTop et scrollLeft comme indiqué dans ce diagramme:

viewport scroll and element offset

Démo:

function getViewportOffset($e) {
  var $window = $(window),
    scrollLeft = $window.scrollLeft(),
    scrollTop = $window.scrollTop(),
    offset = $e.offset();
  return {
    left: offset.left - scrollLeft,
    top: offset.top - scrollTop
  };
}
$(window).on("load scroll resize", function() {
  var viewportOffset = getViewportOffset($("#element"));
  $("#log").text("left: " + viewportOffset.left + ", top: " + viewportOffset.top);
});
body { margin: 0; padding: 0; width: 1600px; height: 2048px; background-color: #CCCCCC; }
#element { width: 384px; height: 384px; margin-top: 1088px; margin-left: 768px; background-color: #99CCFF; }
#log { position: fixed; left: 0; top: 0; font: medium monospace; background-color: #EEE8AA; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<!-- scroll right and bottom to locate the blue square -->
<div id="element"></div>
<div id="log"></div>
33
Salman A