gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-28 08:44:21 24 4
gpt4 key购买 nike

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

它发生在 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/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com