时间戳

首页 > 解决方案 > 关于使用 Vanilla JS 的小屏幕上的滚动动画问题

javascript - 关于使用 Vanilla JS 的小屏幕上的滚动动画问题

问题描述

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

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

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

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

标签： javascriptanimate-on-scroll

解决方案

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

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

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

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

推荐阅读