查找 HTML 元素和浏览器（或窗口）边之间的距离

发布于 2024-10-10 06:35:20 字数 55 浏览 3 评论 0原文

如何使用 jQuery 查找 html 元素与浏览器（或窗口）一侧（左侧或顶部）之间的像素距离？

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

┾廆蒐ゝ 2024-10-17 06:35:20

您可以使用 offset 函数来实现。它为您提供元素相对于文档（左、上）的位置：

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

实时示例在我的浏览器上，该示例表示我们的目标跨度位于文档的 157,47（左、上）。这是因为我对 body 元素应用了一个大的填充值，并使用了一个跨度，上面有一个间隔符，前面有一些文本。

这是第二个示例，显示文档顶部绝对左侧的段落，显示 0,0 作为其位置（并且还显示稍后的跨度从左侧和顶部都有偏移，在我的浏览器上为 129,19）。

You can use the offset function for that. It gives you the element's position relative to the (left,top) of the document:

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

Live example On my browser, that example says that the span we've targeted is at 157,47 (left,top) of the document. This is because I've applied a big padding value to the body element, and used a span with a spacer above it and some text in front of it.

Here's a second example showing a paragraph at the absolute left,top of the document, showing 0,0 as its position (and also showing a span later on that's offset from both the left and top, 129,19 on my browser).

回复收藏 0 原文

峩卟喜欢 2024-10-17 06:35:20

jQuery.offset 需要与 scrollTop 和 scrollLeft 如下图所示：

视口滚动和元素偏移

演示：

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>

jQuery.offset needs to be combined with scrollTop and scrollLeft as shown in this diagram:

viewport scroll and element offset

Demo:

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>

回复收藏 0 原文

~没有更多了~