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

Question

我有一个名为[ { "_id": "1", "duplicate-ids": [ "2" ], "email": "foo@bar.baz" }, { "_id": "2", "duplicate-ids": [ "1" ], "email": "foo@bar.baz" } ] 的简单结构div，它具有scrollContainer规则，还有一个内部较大的div，名为overflow-y:scroll。

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

这是我需要的：

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

如您所见，尝试使用scrollContainer和其他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显示了视图边缘到文档顶部的距离。