如何从元素的顶部获得距离？

Question

我想知道如何使用JavaScript从页面顶部获取元素的距离而不是父元素.

http://jsfiddle.net/yZGSt/1/

Answer 1

offsetTop仅查看元素的父级.只需循环访问父节点,直到父节用完为止并添加其偏移量.

function getPosition(element) {
    var xPosition = 0;
    var yPosition = 0;

    while(element) {
        xPosition += (element.offsetLeft - element.scrollLeft + element.clientLeft);
        yPosition += (element.offsetTop - element.scrollTop + element.clientTop);
        element = element.offsetParent;
    }

    return { x: xPosition, y: yPosition };
}

Answer 2

var elDistanceToTop = window.pageYOffset + el.getBoundingClientRect().top

以我的经验document.body.scrollTop，并不总是返回当前滚动位置（例如，如果滚动实际上发生在其他元素上）。

Answer 3

这个单线看起来效果不错

document.getElementById("el").getBoundingClientRect().top +  window.scrollY

你的小提琴更新了

Answer 4

这里有一些有趣的代码:)

window.addEventListener('load', function() {
  //get the element
  var elem = document.getElementById('test');
  //get the distance scrolled on body (by default can be changed)
  var distanceScrolled = document.body.scrollTop;
  //create viewport offset object
  var elemRect = elem.getBoundingClientRect();
  //get the offset from the element to the viewport
  var elemViewportOffset = elemRect.top;
  //add them together
  var totalOffset = distanceScrolled + elemViewportOffset;
  //log it, (look at the top of this example snippet)
  document.getElementById('log').innerHTML = totalOffset;
});

#test {
  width: 100px;
  height: 100px;
  background: red;
  margin-top: 100vh;
}
#log {
  position: fixed;
  top: 0;
  left: 0;
  display: table;
  background: #333;
  color: #fff;
}
html,
body {
  height: 2000px;
  height: 200vh;
}

<div id="log"></div>
<div id="test"></div>

Answer 5

使用 offsetTop

document.getElementById("foo").offsetTop

演示

Answer 6

offsetTop 不会获取到页面顶部的距离，而是到具有指定位置的最近父元素的顶部。

您可以使用一种简单的技术，将您感兴趣的元素的所有父元素的 offsetTop 相加以获得距离。

// Our element
var elem = document.querySelector('#some-element');

// Set our distance placeholder
var distance = 0;

// Loop up the dom
do {
    // Increase our distance counter
    distance += elem.offsetTop;

    // Set the element to it's parent
    elem = elem.offsetParent;

} while (elem);
distance = distance < 0 ? 0 : distance;

原始代码来自https://gomakethings.com/how-to-get-an-elements-distance-from-the-top-of-the-page-with-vanilla-javascript/

Answer 7

var distanceTop = element.getBoundingClientRect().top;

有关详细信息，请访问链接：

https://developer.mozilla.org/zh-CN/docs/Web/API/Element/getBoundingClientRect