使用javascript獲取元素在固定容器中的垂直位置

Question

當父容器爲position: fixed時，如果試圖獲取元素的垂直位置scrollTop，我有點困難。

使用scrollTop時，輸出值爲0。我猜這是因爲元素不再是嚴格的標準流程。有什麼明顯的我失蹤或有沒有不同的方式來做到這一點，保持position: fixed，而不使用jQuery。也許有一種方法可以獲得元素的位置與父元素的關係嗎？

我附上了下面的測試代碼。

document.getElementById('target').scrollTop;

.container { 
 
    padding-top: 1200px; 
 
    position: fixed; 
 
    top: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    background-color: orange; 
 
} 
 

 
#element { 
 
    background-color: green; 
 
}

<div class="container"> 
 
    <div id="target"> 
 
    Target 
 
    </div> 
 
</div>

Answer 1

您可能需要使用offsetTop代替。 https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetTop

HTMLElement.offsetTop只讀屬性返回當前元素相對於offsetParent節點頂部的距離。

console.log(document.getElementById('target').offsetTop);

.container { 
 
    padding-top: 1200px; 
 
    position: fixed; 
 
    top: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    background-color: orange; 
 
} 
 

 
#element { 
 
    background-color: green; 
 
}

<div class="container"> 
 
    <div id="target"> 
 
    Target 
 
    </div> 
 
</div>

Answer 2

約getBoundingClientRect什麼？

Element.getBoundingClientRect（）方法返回元素的大小及其相對於視口的位置。

document.getElementById('target').getBoundingClientRect().top;