javascript - 如何判断元素的哪一部分在视口(viewport)内？

Question

如何确定 DOM 元素在当前视口(viewport)内的百分比？我想计算视口(viewport)内元素的面积与元素总面积的比率。

相关问题:How to tell if a DOM element is visible in the current viewport?

Answer 1

参见getBoundingClientRect和 Window.innerHeight .

let {top, height} = element.getBoundingClientRect(),
    percentVisible = Math.max(0, Math.min(1, (window.innerHeight - top) / height));

我猜测您的用例，但在现代浏览器中，请参阅 IntersectionObserver及其 intersectionRatio .