如何仅在视口之外的元素上执行 jquery Waypoints？

Posted 2023-05-08

【中文标题】如何仅在视口之外的元素上执行 jquery Waypoints？

【英文标题】：How to execute jquery Waypoints only on elements outside of viewport?

【发布时间】：2015-01-22 13:57:06

【问题描述】：

我有一个块列表，其中一些只有在您向下滚动时才可见。一旦它们进入视口，我需要将不可见的尺寸从 0% 缩放到 100%，这是一种延迟加载效果，但在整个元素上而不是仅在图像上。为此，我向航点元素添加了一个类。 Waypoints 还会在页面加载时在视口中的元素上添加类。是否可以仅定位尚未在视口中的元素？

这是我正在使用的功能：

$('.post').waypoint(function(direction) 
    if (direction === 'down') $(this).addClass('animate');
,  offset: '101%' );

这是示例链接 http://brainfood.clientapproval.co.uk/

如果向下滚动，您会看到该类已添加到视口中已有的元素中。然后您可以在视口之外的元素上看到所需的效果。有没有办法阻止 Waypoint 在页面加载时在视口中已经存在的元素上执行？或者您能推荐其他方法吗？

【问题讨论】：

您可以使用自定义选择器，例如appelsiini.net/projects/viewport，然后使用$('.post:not(:in-viewport)').waypoint(...);

你无法理解我对你的感激之情！谢谢！这就是我所需要的

【参考方案1】：

你应该试试这个plugin，这在你的情况下非常有用，它会简单地告诉你元素是否在视口中（你可以在每次滚动时触发检查）

用法简单如下：

$('#element').visible();

如果整个元素可见，则此基本检查将返回 true 用户（在可视视口内）。

检查这个基本的example

【讨论】：

谢谢，我之前尝试过可见插件，但没有成功。我已经用自定义选择器解决了 $('.post:not(:in-viewport)').waypoint(...);根据 A. Wolff 评论

没问题，但我不明白你为什么不能使用它？无论如何，很高兴你解决了你的问题。