jquery-waypoints 2.x升级4.x后this.previous()方法异常求助

兄弟，你遇到的这个问题我升级Waypoints时也踩过坑！这不是bug，是4.x版本里有意的API变更——Waypoints团队调整了waypoint集合的默认排序逻辑，直接导致this.previous()和this.next()的指向完全反过来了。

问题根源 #

在2.x版本中，同组的waypoints是按照DOM中从上到下的出现顺序排序的，所以this.previous()会返回当前元素上方的那个waypoint。但到了4.x，默认排序改成了基于元素的触发位置（垂直滚动下默认是元素顶部触达视口顶部），排序顺序变成了从下到上——也就是DOM中靠后的元素会排在集合的前面。这就导致你调用this.previous()时，拿到的反而DOM中下方的下一个waypoint，连续调用两次this.previous()就绕回了当前元素，刚好和你断点验证的结果一致。

两种解决方案 #

方案1：改回2.x的DOM顺序排序

如果想保持和旧版本一致的行为，可以在初始化waypoints时，通过group选项的sort方法手动指定排序规则，强制按DOM出现顺序排列：

$('.your-waypoint-selector').waypoint({
  handler: function(direction) {
    // 你的原有处理逻辑，现在this.previous()就会指向DOM中前一个元素了
    console.log(this.previous().element); // 正确指向上方的waypoint元素
  },
  group: {
    name: 'custom-group',
    sort: function(a, b) {
      // 利用DOM节点的位置关系比较，实现从上到下排序
      return a.element.compareDocumentPosition(b.element) & Node.DOCUMENT_POSITION_FOLLOWING ? -1 : 1;
    }
  }
});

方案2：直接替换API调用

如果不想修改排序逻辑，也可以直接把代码里的this.previous()换成this.next()，this.next()换成this.previous()，适配新的排序规则。这种方式更简单，适合不想动初始化配置的场景。

验证说明 #

你提到的this.previous().previous().element == this.element完全符合排序反转后的表现：因为集合是循环的，当前元素在反转后的集合里，前一个是原来的下一个，再前一个就回到了自己，这个现象正好坐实了排序规则变更的问题。

内容的提问来源于stack exchange，提问作者cjbarth