親先頭から子要素の距離を取得します

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

間の新しい距離を取得します。この

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

と同じように、私はそれを動作させる方法を見つけました。実際には、@ダミーの答えは私にいくつかの重要な洞察を与えた。

基本的には、式は次のようになります。これらの座標を持つ

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)を行う場合は、あなたが得ます子要素とその親の間の初期距離。しかし、スクロールするときに、スクロール量を考慮する必要があります。あなたはchildParentDistanceからscrolledParentDistanceを引く場合、あなたはこの子とその親