我正在构建一个网站,一旦用户向下滚动,我想要动画。我遇到了getBoundingClientRect的问题,因为它说它在页面的控制台中是未定义的。谢谢你的帮助!
var pointsArray = document.getElementsByClassName('point');
var animatePoints = function (points) {
for (var i = 0; i < points.length; i++) {
points[i].style.opacity = 1;
points[i].style.transform = "scaleX(1) translateY(0)";
points[i].style.msTransform = "scaleX(1) translateY(0)";
points[i].style.WebkitTransform = "scaleX(1) translateY(0)";
}
};
window.onload = function () {
var sellingPoints = document.getElementsByClassName('selling-points')[0];
var scrollDistance = sellingPoints.getBoundingClientRect().top - window.innerHeight + 200;
window.addEventListener("scroll", function(event) {
if (document.documentElement.scrollTop || document.body.scrollTop >= scrollDistance) {
animatePoints(pointsArray);
}
});
}