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