Question

我正在尝试编写一个用于在JavaScript中滚动事件的小型库，但我必须错过一些简单的东西，因为看起来我的变量在这个方法的某些点被重置了。

以下是代码：

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

Answer 1

您已经使用名为“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");

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

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

1 个答案: