在Angularjs指令中从滚动容器div的顶部获取元素位置

Question

我有一个名为scrollContainer的简单结构div， scrollContainer具有overflow-y:scroll规则和一个内部较大的div，名为inner 。

在内部div中，我有一些文本和输入。 在输入上，我应用了一个名为getPosition的属性指令，该指令应在滚动事件中返回输入相对于scrollContainer顶部的确切位置。

这就是我需要的：

这是示例角度应用程序： https : //codepen.io/neptune01/pen/vapmLQ

如您所见，尝试过使用offsetTop和其他dom属性，但是我找不到任何能满足我需要的东西。

Answer 1

我建议结合使用getBoundingClientRect（）和当前滚动位置来完成此操作，如下所示：

let outer = document.getElementById('scrollContainer');
let inner = document.getElementById('inner');

let outerTop = outer.getBoundingClientRect().top + (window.scrollY || window.pageYOffset);
let innerTop = inner.getBoundingClientRect().top + (window.scrollY || window.pageYOffset);

let difference = innerTop - outerTop;

您不只是从内部顶部减去外部顶部而忽略滚动位置的原因是因为在进行计算的同时滚动的可能性很小，因为getBoundingClientRect（）仅占用了偏移量考虑从视图边缘到元素的距离，而scrollY显示从视图边缘到文档顶部的距离。