javascript - 淡入稍后加载的屏幕外元素

标签 javascript jquery html css ajax

我不想在向下滚动时淡入淡出元素。此外,还存在通过单击按钮添加更多元素的可能性。 问题是,一旦附加的元素离开屏幕,它们就不会被动画化,甚至不会显示。

它发生在 wow.js 作为 scrollReveal.js 和任何其他所以它似乎是一个普遍的问题,但我无法弄清楚为什么会发生。

这里是

sample

这样您就可以看到确切的问题。

只需按几次 添加按钮。

编辑

所以,问题是,我使用滚动条插件将多个 div 容器嵌套在一起。哪一个都没有关系——每个都会产生这个问题。我通过更改 scrollReveal.js 中的一行解决了这个问题 - 第 78 行:

viewport: window.document.documentElement, // <HTML> element by default.

viewport: window.document.getElementById('right'), // it's my custom container-div

现在一切正常。

如果您在使用任何滚动条插件或 wow.js 时遇到类似问题,它也应该可以解决您的问题。只需更改相应的视口(viewport)即可。

最佳答案

这里的问题是,如果每次添加新元素时都调用 window.sr = new ScrollReveal(),那么所有对具有 data-sr 的元素的引用都会被删除,只有最后一个元素的引用将被保存。

相反,您可以调用 window.sr.init(true);。有关详细信息,请访问此 github 元素 https://github.com/julianlloyd/scrollReveal.js/blob/master/scrollReveal.js

这是经过上述更改的工作笔:CodePen

关于javascript - 淡入稍后加载的屏幕外元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27681410/

相关文章:

javascript - 如何在调用下一个回调函数之前添加延迟?

javascript - 为什么语法错误出现在我的 angularjs 元素中

javascript - 滚动时关闭下拉菜单

javascript - 如何使 jQuery 表格单元格 (td) 可单击以运行函数?

javascript - 对于类 'y' 的每个表,如果表不包含类 'x' 的后代,则选择 th 和 td 后代

java - 如何在 JSP/JSTL 中对 URL 进行 URL 编码?

javascript - 如何使用for循环在div中显示restful api获取的数据?

javascript - 无法使用 .net 在网页中单击“提交”按钮

javascript - 摩卡 - TypeError : Cannot read property '$scope' of undefined

javascript - javascript 上的数组减少返回错误值并具有数组可链接性