jQuery 获取元素相对于窗口的位置

javascript jquery ipad webkit webview

2022-08-30 01:40:57

给定一个HTML DOM ID，如何在JavaScript / JQuery中获取元素相对于窗口的位置？这与相对于文档或偏移父级不同，因为该元素可能位于 iframe 或某些其他元素中。我需要获取元素矩形的屏幕位置（如位置和尺寸），因为它当前正在显示。如果元素当前不在屏幕外（已向下滚动），则负值是可以接受的。

这是针对iPad（WebKit / WebView）应用程序的。每当用户点击中的特殊链接时，我都应该打开一个弹出视图，其中显示有关该链接的更多信息。弹出视图需要显示一个箭头，该箭头指向调用它的屏幕部分。UIWebView

答案 1

最初，获取元素的 .offset 位置并计算其相对于窗口的相对位置

请参阅：
1. 偏移量
2。滚动
3。滚动顶部

你可以试试这个小提琴

以下几行代码解释了如何解决此问题

当执行.scroll事件时，我们计算元素相对于窗口对象的相对位置

$(window).scroll(function () {
    console.log(eTop - $(window).scrollTop());
});

当在浏览器中执行滚动时，我们调用上述事件处理程序函数

代码片段

function log(txt) {
  $("#log").html("location : <b>" + txt + "</b> px")
}

$(function() {
  var eTop = $('#element').offset().top; //get the offset top of the element
  log(eTop - $(window).scrollTop()); //position of the ele w.r.t window

  $(window).scroll(function() { //when window is scrolled
    log(eTop - $(window).scrollTop());
  });
});

#element {
  margin: 140px;
  text-align: center;
  padding: 5px;
  width: 200px;
  height: 200px;
  border: 1px solid #0099f9;
  border-radius: 3px;
  background: #444;
  color: #0099d9;
  opacity: 0.6;
}
#log {
  position: fixed;
  top: 40px;
  left: 40px;
  color: #333;
}
#scroll {
  position: fixed;
  bottom: 10px;
  right: 10px;
  border: 1px solid #000;
  border-radius: 2px;
  padding: 5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="log"></div>

<div id="element">Hello
  <hr>World</div>
<div id="scroll">Scroll Down</div>

答案 2

尝试使用边界框。这很简单：

var leftPos  = $("#element")[0].getBoundingClientRect().left   + $(window)['scrollLeft']();
var rightPos = $("#element")[0].getBoundingClientRect().right  + $(window)['scrollLeft']();
var topPos   = $("#element")[0].getBoundingClientRect().top    + $(window)['scrollTop']();
var bottomPos= $("#element")[0].getBoundingClientRect().bottom + $(window)['scrollTop']();