web-dev-qa-db-ja.com

HTML要素とブラウザ（またはウィンドウ）側の間の距離を見つける

JQueryを使用してhtml要素とブラウザ（またはウィンドウ）側（左または上）の1つの間の距離をピクセルで見つける方法は？

javascriptjqueryhtmlpositiondistance
47
Kai

そのために offset 関数を使用できます。 documentの（左、上）に対する要素の位置を示します：

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

ライブの例 私のブラウザでは、その例は、対象のスパンがドキュメントの157,47（左、上）にあることを示しています。これは、body要素に大きなパディング値を適用し、その上にスペーサーとその前のテキストを含むスパンを使用したためです。

2番目の例 文書の絶対左上に段落を表示し、その位置として0,0を表示します（また、後で左と上からのオフセット129、私のブラウザで19）。

47
T.J. Crowder

jQuery.offset は、この図に示すように scrollTop および scrollLeft と組み合わせる必要があります。

viewport scroll and element offset

デモ：

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