Question

我已经为我的网站创建了一个动画，以在使用Vanilla JS滚动时更改某些元素（例如其背景色）。为此，我使用了window.onscroll属性，并在window.scrollY到达特定位置时触发了动画，我的代码是：

window.addEventListener('scroll', () => {
   if (window.scrollX >= 1000) {
      box.style = "background:red"
   }
})

当我以大屏幕分辨率进行编辑时，它看起来很棒，但是如果我查看笔记本电脑上的页面，动画会变得混乱，因为屏幕的innerWidth和innerHeight不同。我想在到达页面的特定部分时动态触发动画，而不必担心滚动位置。

有人对我如何解决此问题有任何想法吗？

Answer 1

我认为使用getBoundingClientRect()可以解决您的问题。您基本上是这样的：

var my_box = document.getElementById('my-box');
var rect = my_box.getBoundingClientRect();

rect变量现在包含一个对象，该对象包括一个top和一个left属性，其属性值相对于视口。