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绘制事件有关，直到函数执行结束或者某个缓冲区用完为止，才会呈现/刷新UI绘图事件。

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

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

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

Answer 2

因此我放弃了使用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

在追加后，底部的航点不会向下移动

2 个答案: