JavaScript 滚动事件侦听器不起作用

Question

我有一个脚本可以为我的页面上的一些项目设置动画。 但是，由于页眉、导航和横幅的原因，页面加载时不会正确看到这些点。 所以我希望在用户向下滚动到足以看到它之后加载动画。 在查找了不同的代码之后，我想出了下面的代码。 但是，无论我做什么，滚动事件似乎都没有响应。 我什至试图通过向控制台发送滚动数据来测试它，但一无所获。

 "use strict"; var pointsArray = document.getElementsByClassName('point'); var animatePoints = function (points) { function revealPoints() { for (var i = 0; i < points.length; i++) { // animate all 'point' classes 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)"; } // end loop } // end revealPoints() revealPoints(); // show animations }; window.onload = function () { if (window.innerHeight > 950) { // if user can see it, just do the animation animatePoints(pointsArray); } var sellingPoints = document.getElementsByClassName('selling-points')[0]; var scrollDistance = sellingPoints.getBoundingClientRect().top - window.innerHeight + 200; window.addEventListener("scroll", function (event) { console.log("Current offset from the top is " + sellingPoints.getBoundingClientRect().top + " pixels"); if (document.documentElement.scrollTop || document.body.scrollTop >= scrollDistance) { animatePoints(pointsArray); } }); };

Answer 1

我认为您的问题是window.onload事件永远不会在您的情况下触发。

你可以不使用onload吗？ 像这里https://jsfiddle.net/ovkycmem/或加载https://jsfiddle.net/ovkycmem/1 。

但是您需要确保其他脚本不会覆盖window.onload函数。 因此，要找出您的问题是什么，请发布更多代码或至少不工作的示例。