6

我的航点在第一次向下滚动时以 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>
4

2 回答 2

4

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

API 文档建议使用以下refresh命令完成此操作：

$.waypoints('refresh');

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

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

因此，使用 a 将刷新移出执行顺序timeout似乎可以解决问题：

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

请参阅我的jsFiddle，它似乎工作正常。

于 2013-09-09T02:45:27.897 回答
0

因为这个，我放弃了使用 Waypoints。

使用了更简单有效的方法。只需检查元素是否在视口中，然后加载内容。

function isInViewport(el) {

    // Special bonus for those using jQuery
    if (typeof jQuery === "function" && el instanceof jQuery) {
        el = el[0];
    }

    var rect = el.getBoundingClientRect();

    var isInView = (
        rect.top >= 0 &&
        rect.left >= 0 &&
        rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) && /*or $(window).height() */
        rect.right <= (window.innerWidth || document.documentElement.clientWidth) /*or $(window).width() */
    );

    if (isInView) {
        getMoreContent();
    }
}

来源：https ://stackoverflow.com/a/7557433

于 2017-05-19T22:31:41.230 回答