jquery - 添加后底部的航点不会向下移动

Question

我的航点在第一次向下滚动时会在 100% 时触发。 Html 附加到航路点上方的 div#mylist。向上滚动页面并再次向下滚动，它将附加更多内容。几次之后，值得注意的是，路点不再在页面滚动 100% 时触发，而是在附加之前实际上是 div#waypoint 开始的位置。您可以通过滚动条的缩小情况看到航路点已被击中。您还可以看到 div#mywaypoint 始终位于底部。

如何让路径点在每次追加后每次都以 100% 运行？

这是jsFiddle

代码
我有一个路径点设置为 100% 触发。我有两个div。一个包含内容，另一个用于触发路径点。

$('#mywaypoint').waypoint(function (direction)
{
    if (direction != "down") return;
    for(var i = 0; i < 20; i++)
    {
        $('#mylist').append(i + ' - goodbye<br />');
    }
    $('#mylist').append('------<br />');
}, { offset: '100%' });

<div id="mylist"> 
    // {repeated 20 or more times as initial html}
    hello<br />
</div>
<div id='mywaypoint'></div>

Answer 1

添加列表后需要重新计算航路点位置。

API 文档建议这是使用 refresh 命令完成的:

$.waypoints('refresh');

但是，在函数之后立即刷新会导致(至少在我的测试中)立即附加许多列表。

我怀疑这与 UI 绘制事件在函数执行结束或某些缓冲区耗尽之前不会渲染/刷新有关。

因此，使用超时将刷新移出执行顺序似乎可以解决问题:

setTimeout(function(){$.waypoints('refresh');},10);

查看我的jsFiddle ，这似乎工作正常。