为什么(jQuery)Waypoint是“视图下方"在隐藏元素上不起作用? [英] Why (jQuery) Waypoints "bottom-in-view" doesn't work on hidden elements?

问题描述

我正在尝试使用jQuery& Waypoint(以前是jQuery Waypoint)可以在用户向下滚动时动态显示隐藏的图像.

I was trying to use jQuery & Waypoints (formely jQuery Waypoints) to dynamically show hidden images when a user scrolls down.

我发现我可以很容易地向元素添加航路点，并在元素处于视线"状态(将offset属性设置在视线底部")时触发处理程序.

I found out that I can quite easily add a waypoint to an element and have the handler triggered when the element is "in view" (with the offset property set at bottom-in-view).

但是，尝试使用相同的属性在隐藏元素上无效:在加载页面后立即触发处理程序.

However, trying to use the same property doesn't work on an hidden element: the handler is triggered right after the page is loaded.

例如:当已经显示的元素进入视口时，将它们隐藏起来很容易. (示例1:jsFiddle ):

E.g.: hiding already-displayed elements when they get in the viewport is easy. (Example 1: jsFiddle):

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

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

But, what I want to do is the opposite: show a hidden element when we scroll to its position. This next example doesn't work intended as the handler is trigger right after he window.load() event, instead of waiting for the user to scroll down. (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时，将执行航点.在div的处理程序中，我使用jQuery显示其他元素. (示例3:jsFiddle ):

I found a work-around. I use a empty (but not hidden) div onto which I attach the waypoint. Then, the waypoint gets executed when I scroll-down to aforementioned div. Within the div's handler, I use jQuery to display other elements. (Example 3: jsFiddle):

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

但是，对于为什么将附加到隐藏元素的window.load()之后立即触发航点，我仍然感到困惑.尽管未显示，但附加了航点的元素仍在页面的下方.

However, I am still confused as to why the waypoint is fired right after window.load() when attached to hidden elements. The elements to which the waypoint is attached, despite not being shown, are further down the page.

推荐答案

它不仅是'bottom-in-view'.当元素隐藏且不显示时，每个偏移量都会失败.有关详细信息，请参见不显示任何元素的Waypoint调试指南"部分.

It isn't just 'bottom-in-view'. Every offset fails when the element is hidden with display none. This is covered in detail on the Waypoints debugging guide section on display none elements.

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

Waypoints works by asking the element where its position is on the page, so that it can calculate where in the scroll it needs to trigger the handler. But display none elements don't live on the page. When asked, those elements report themselves at 0,0.

这篇关于为什么(jQuery)Waypoint是“视图下方"在隐藏元素上不起作用?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！