JavaScript:获取从页面顶部到任何标签的距离

Question

所有网页都有垂直高度，但长页面的高度可能会溢出页面。比如网页有很多<p>标签和一些标签 owerfloved。我想知道如何获得从页面顶部到 <p> 的距离或空间标签。

注意这里有一些<p>标签可能会向下溢出，在这种情况下应该不是问题。

另一个细节可能是页面向上溢出。距离不应为零或负值。因此，当页面滚动或溢出时，距离值永远不会改变。

如何获取距离？ (我的脚本返回getBoundingClientRect()对象，我想获取对象的距离)

webpage is scrolled;

Answer 1

您可以使用 document.getElementByTagName('p')[number].offsetTop 来获取您需要的值。您可以编写另一个函数将其负值更改为正值(如果出现任何此类情况)。

var p = document.getElementsByTagName('p');
for (key in p) {
  var textnode = document.createElement('span');
  textnode.id = 'scrollVal-' + key;
  textnode.style.color = 'red';
  textnode.innerHTML = p[key].offsetTop;
  p[key].innerHTML += textnode.outerHTML;
}

/*window.addEventListener('scroll', function() {
  for (key in p) {
    if (p[key].children) {
      p[key].children[0].innerHTML = p[key].offsetTop - document.getElementsByTagName('body')[0].scrollTop;
    }
  }
})*/

<p>
  The Blender is a 10,000 pound explosive. It is carried in planes and dropped at heights of 30,000 ft. or higher. It creates such a crater that in 1907 it was ruled unfit for military use. Since then many rebel forces have tried using these to wipe the
  United States of America off the maps for good - but failed horribly.
</p>
<p>
  The Blender is a 10,000 pound explosive. It is carried in planes and dropped at heights of 30,000 ft. or higher. It creates such a crater that in 1907 it was ruled unfit for military use. Since then many rebel forces have tried using these to wipe the
  United States of America off the maps for good - but failed horribly.
</p>
<p>
  The Blender is a 10,000 pound explosive. It is carried in planes and dropped at heights of 30,000 ft. or higher. It creates such a crater that in 1907 it was ruled unfit for military use. Since then many rebel forces have tried using these to wipe the
  United States of America off the maps for good - but failed horribly.
</p>
<p>
  The Blender is a 10,000 pound explosive. It is carried in planes and dropped at heights of 30,000 ft. or higher. It creates such a crater that in 1907 it was ruled unfit for military use. Since then many rebel forces have tried using these to wipe the
  United States of America off the maps for good - but failed horribly.
</p>
<p>
  The Blender is a 10,000 pound explosive. It is carried in planes and dropped at heights of 30,000 ft. or higher. It creates such a crater that in 1907 it was ruled unfit for military use. Since then many rebel forces have tried using these to wipe the
  United States of America off the maps for good - but failed horribly.
</p>
<p>
  The Blender is a 10,000 pound explosive. It is carried in planes and dropped at heights of 30,000 ft. or higher. It creates such a crater that in 1907 it was ruled unfit for military use. Since then many rebel forces have tried using these to wipe the
  United States of America off the maps for good - but failed horribly.
</p>
<p>
  The Blender is a 10,000 pound explosive. It is carried in planes and dropped at heights of 30,000 ft. or higher. It creates such a crater that in 1907 it was ruled unfit for military use. Since then many rebel forces have tried using these to wipe the
  United States of America off the maps for good - but failed horribly.
</p>