获取容器中的滚动位置

Question

我试图做一个动画svg，我需要知道我的div上的滚动位置，在我复制w3schools之前我已经有了一些代码

问题是我希望滚动进入div元素时开始计数，这是我做的代码：

var scrollpercent =
 (document.body.scrollTop + document.documentElement.scrollTop) / 
 (document.documentElement.scrollHeight - document.documentElement.clientHeight);


 console.log($(".svg-container").scrollTop())

尝试svg-container.scrollTop()，但总是给我0

Answer 1

获取滚动位置有时会让人感到沮丧。如果您需要知道屏幕上元素的位置，可以使用element.getBoundingClientRect()。

https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect

// rect is a DOMRect object with eight properties: left, top, right, bottom, x, y, width, height
var rect = $(".svg-container")[0].getBoundingClientRect();