Javascript 使用Vanilla JS在小屏幕上滚动动画问题

我已经为我的网站创建了一个动画，在使用Vanilla JS滚动时更改某个元素（例如其背景颜色）。为此，我使用了

window.onscroll

属性，并在

window.scrollY

到达特定位置时触发动画，我的代码是：

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

当我以大屏幕分辨率进行编辑时，它看起来很棒，但如果我查看笔记本电脑上的页面，动画会变得一团糟，因为屏幕的

innerWidth

和

innerHeight

不同。我想动态触发动画，如果它到达页面的某个部分，而不必担心滚动位置

---

有人知道我如何解决这个问题吗？

我认为使用

getBoundingClientRect（）

可以解决您的问题。 你基本上是这样做的：

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

rect

变量现在包含一个对象，该对象包括一个

top

和一个

left

属性，其值与视口相关

尝试搜索“javascript动态内部高度和宽度”