jquery - 为什么 (jQuery) Waypoints "bottom-in-view"不适用于隐藏元素？

Question

我试图使用 jQuery 和 Waypoints(以前称为 jQuery Waypoints)在用户向下滚动时动态显示隐藏的图像。

我发现我可以很容易地向元素添加一个路径点，并在元素“在 View 中”时触发处理程序(在 View 底部设置 offset 属性)。

但是，尝试使用相同的属性对隐藏元素不起作用:加载页面后立即触发处理程序。

例如:当已经显示的元素进入视口(viewport)时隐藏它们很容易。 (Example 1: jsFiddle):

var waypoints = $('.dynamic').waypoint({
    handler: function (direction) {
        $(this).hide(700);
    },
    offset: 'bottom-in-view'
});

但是，我想做的是相反的:当我们滚动到隐藏元素的位置时显示它。下一个示例不起作用，因为处理程序是在 window.load() 事件之后立即触发的，而不是等待用户向下滚动。 (Example 2: jsFiddle):

var waypoints = $('.dynamic').waypoint({ // these elements are display: none
    handler: function (direction) {
        $(this).show(700);
    },
    offset: 'bottom-in-view'
});

我找到了解决方法。我使用一个空的(但不是隐藏的)div 来附加航路点。然后，当我向下滚动到上述 div 时，该路点就会被执行。在 div 的处理程序中，我使用 jQuery 来显示其他元素。 (Example 3: jsFiddle):

var waypoints = $('#emptyDiv').waypoint({
    handler: function (direction) {
        $('.dynamic').show(700);
    },
    offset: 'bottom-in-view'
});

但是，我仍然很困惑为什么当附加到隐藏元素时，路径点会在 window.load() 之后立即触发。尽管未显示，但附加路径点的元素位于页面下方。

Answer 1

这不仅仅是“bottom-in-view”。当元素隐藏且不显示时，每个偏移都会失败。 the Waypoints debugging guide section on display none elements对此进行了详细介绍。 .

Waypoints 的工作原理是询问元素在页面上的位置，以便它可以计算需要在滚动中的哪个位置触发处理程序。但不显示页面上不存在的任何元素。当被问及时，这些元素报告自己为 0,0。