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函数。所以要找出你的问题，请发布更多代码或至少不是工作样本。

JavaScript滚动事件侦听器无法正常工作

1 个答案: