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

我有一个名为

scrollContainer

的简单结构div，其中包含

overflow-y:scroll

规则和一个名为

internal

的内部较大div

在内部分区中，我有一些文本和输入。在输入上，我应用了一个名为

getPosition

的属性指令，它应该在scroll事件中返回输入相对于

scrollContainer

顶部的确切位置

这就是我需要的：

以下是示例angular应用程序：

---

正如您所看到的，尝试了使用

offsetTop

和其他dom属性，但我找不到任何可以满足我需要的内容。

我建议使用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（）只考虑从视图边缘到元素的距离，而滚动显示从视图边缘到文档顶部的距离。

我建议结合使用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（）只考虑从视图边缘到元素的距离，而滚动显示从视图边缘到文档顶部的距离。

$（元素[0]）.offset（）.top

如果要使用jquery库，请转到OP。但这是vanilla js

$（元素[0]）.offset（）中的正确解决方案。如果要使用jquery库，请将top

添加到OP。但这是vanilla js中正确的解决方案