從父頂部

Question

獲取子元素距離比方說，我有一個內部的div滾動的<li>元素和滾動被設置爲顯示在視窗中該元素。

我需要獲取該元素和其可滾動父級之間的距離，如上圖所示，但element.getBoundingClientRect().top和element.offsetTop都給我提供了錯誤的值。可以這樣做嗎？

我發了筆，把事情稍微容易一些：

http://codepen.io/Darksoulsong/pen/LbYMex

一塊我的代碼：

document.addEventListener("DOMContentLoaded", function(event) { 
    var selectedEl = document.getElementById('consequatur-51'); 
    var selectedElRect = selectedEl.getBoundingClientRect(); 
    var sidebar = document.getElementById('sidebar'); 
    sidebar.scrollTop = selectedEl.offsetTop - 60; 

    document.getElementById('offsetTop').innerText = selectedEl.offsetTop; 
    document.getElementById('rectTop').innerText = selectedElRect.top; 
}); 

Answer 1

之間距離我發現瞭如何使其發揮作用。其實，@Dummy的回答給了我一些重要的見解。

基本上，公式是：

childElementDistanceFromParentTop = actualChildElementDistancefromTop - parentElementDistanceFromTop 

有了這些座標我甚至可以告訴我們，如果元素中視或不可見。

更新筆：http://codepen.io/Darksoulsong/pen/rWawrZ

Answer 2

var parentTop = parentElem.getBoundingClientRect().top; // Initial parent's top distance from the top of the viewport; 

var currentChildTop = childElement.getBoundingClientRect().top; // Initial child's top distance from the top of the viewport; 

如果你這樣做var childParentDistance = Math.abs(parentTop - currentChildTop)，你會得到子元素與其父元素之間的初始距離。但是當你滾動時，你需要考慮滾動量。像這樣

var scrolledParentDistance= Math.abs(parentTop - parentElem.getBoundingClientRect().top); 

，如果你從childParentDistance減去scrolledParentDistance，你會得到這樣的孩子，其父