Question

我有一个带有垂直滚动的div元素。它有span个元素，里面有文字。如何获取这些span元素的坐标。但是我不希望它相对于滚动位置。

例如，在div中，假设它的宽度为400像素，高度为1000像素（但视图高度为500像素），并且其垂直向中间滚动。然后在视图的中心，我看到一个文本，如果我点击它，我想要坐标像（200,250）

如何获得div容器绝对的坐标？

Answer 1

使用element.getBoundingClientRect？（如果您希望它相对于容器，请减去容器的顶部。）

＆＃13;

function client() {
  alert(document.getElementById('child').getBoundingClientRect().top);
}

function local() {
  var container = document.getElementById('container');
  var containerRect = container.getBoundingClientRect();
  var child = document.getElementById('child');
  var childRect = child.getBoundingClientRect();
  localTop = childRect.top - containerRect.top;
  alert(localTop);
}

＆＃13;

#container {
  height: 100px;
  overflow:scroll;
  border:1px solid red;
  margin-top:100px;
}

#child {
  background: yellow;
}

＆＃13;

<div id="container">
  <div>Test</div>
  <div>Test</div><div>Test</div><div>Test</div><div>Test</div>
  <div id="child">Item of interest</div>
    <div>Test</div><div>Test</div><div>Test</div><div>Test</div>
</div>
<button onclick="client()">Global top</button>
<button onclick="local()">Local top</button>

＆＃13;

Answer 2

假设可滚动div的id为'myDiv'，div中的一个元素的id为'element1'。要在javascript中找到真正的“顶级”值，请尝试以下方法：

alert($('myDiv').css('top') + $('element1').css('top'));

如何确定可滚动div中的元素坐标？

2 个答案: