Question

我正在尝试构建一个无限滚动的网站，与this site相当。请注意，当您向下滚动到下一篇文章时以及向上滚动到上一篇文章时，URL会更新。

这是我制作的代码。在附加新文章时执行一次，并创建用于向上和向下滚动的航点。

function addUrlWaypoint() {
  var $lastArticle = $("article").last();

  $lastArticle.waypoint(function (direction) {
    if (direction === 'down') {
      history.pushState(null, "", $lastArticle.data("url"));
    }
  });

  $lastArticle.waypoint(function (direction) {
    if (direction === 'up') {
      history.pushState(null, "", $lastArticle.data("url"));
    }
  }, {
    offset: function() {
      return -$lastArticle.clientHeight
    }
  });
}

偏移的代码取自the waypoint docs。但是，此代码在向上滚动时会持续触发，并且对所有文章都会这样做。

当我将偏移量更改为某个值（如-100）时，它会正确触发，但我希望它在底部进入顶视图时触发（因此clientHeight位）

Answer 1

这里的答案表示为一个例子......

new Waypoint({
  element: $('#my-element'),
  offset: function () {
    return this.element.height();
  }
});

Answer 2

我找到了答案......示例代码处理DOM对象，而我使用的是jQuery对象。

这使得clientHeight成为undefined，因此您应该使用height()

向上滚动时会持续触发Waypoint处理程序

2 个答案: