javascript - 为什么这些变量会被清除/重置？

我试图编写一个小的库来滚动JavaScript中的事件，但是我肯定缺少一些简单的东西，因为似乎我的var在此方法的某个时刻被重置了。

这是代码：

var scrollEvents = {
  change: window.onscroll = function (selector, property, initialValue, changedValue) {
    // grab the selectors and convert them into an array so we can use forEach()
    var items = document.getElementsByClassName(selector);
    var itemArray = [].slice.call(items);
    // window.pageYOffset has better compatibility than document.body.scrollTop
    var scrollPos = window.pageYOffset;
    var breakPoint = 10;
    if (scrollPos > breakPoint) {
      console.log('if');
      console.log(items);
      console.log(itemArray);
      itemArray.forEach(function (i) {
        i.setAttribute("style", property + ": " + changedValue + ";");
        console.log("style", property + ": " + changedValue + ";")
      });
    } else {
      console.log('else');
      console.log(itemArray);
      itemArray.forEach(function (i) {
        i.setAttribute("style", property + ": " + initialValue + ";");
      });
    }
  }
};

我想这样称呼它：

scrollEvents.change("foo", "height", "400px", "800px");

我在里面有很多额外的console.log()调用，因为我一直在尝试诊断问题，但是我已经重写了几次代码，而且似乎陷入了死胡同。

我想要的行为是，我可以调用scrollEvents.change()传递这些参数来更改某些滚动点处的样式属性。

这是没有所有额外console.log()的代码：

var scrollEvents = {
  change: window.onscroll = function (selector, property, initialValue, changedValue) {
    // grab the selectors and convert them into an array so we can use forEach()
    var items = document.getElementsByClassName(selector);
    var itemArray = [].slice.call(items);
    // window.pageYOffset has better compatibility than document.body.scrollTop
    var scrollPos = window.pageYOffset;
    var breakPoint = 10;
    if (scrollPos > breakPoint) {
      itemArray.forEach(function (i) {
        i.setAttribute("style", property + ": " + changedValue + ";");
      });
    } else {
      itemArray.forEach(function (i) {
        i.setAttribute("style", property + ": " + initialValue + ";");
      });
    }
  }
};

更新：
感谢@pointy，该库现在可以使用：https://github.com/ryanpcmcquen/scrollEvents

最佳答案

您已经建立了一个带有名为“ change”的属性的对象，并且已经为该属性分配了一个函数。该分配还将功能分配给window对象的“ onscroll”属性。

当浏览器检测到用户滚动操作时，它将调用该函数，并且无论声明中的正式参数列表如何，它都将不传递任何内容（Internet Explorer）或事件对象。

调用scrollEvents.change将调用事件处理程序功能，但是当用户弄乱滚动条或鼠标滚轮（或其他）时，这不会影响浏览器如何调用事件处理程序。

我不确定您打算如何使用此API，因此很难说如何修复。如果您想一次仅附加一个事件处理程序，那么最简单的方法是将当前代码包装在另一个函数中：

var scrollEvents = {
  change: function (selector, property, initialValue, changedValue) {
    window.onscroll = function(event) {
      // grab the selectors and convert them into an array so we can use forEach()
      var items = document.getElementsByClassName(selector);
      var itemArray = [].slice.call(items);
      // window.pageYOffset has better compatibility than document.body.scrollTop
      var scrollPos = window.pageYOffset;
      var breakPoint = 10;
      if (scrollPos > breakPoint) {
        itemArray.forEach(function (i) {
          i.setAttribute("style", property + ": " + changedValue + ";");
        });
      } else {
        itemArray.forEach(function (i) {
          i.setAttribute("style", property + ": " + initialValue + ";");
        });
      }
    };
  }
};

现在当你打电话

scrollEvents.change("foo", "height", "400px", "800px");

然后该函数调用将建立事件处理程序。

关于javascript - 为什么这些变量会被清除/重置？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/32928992/