FadeIn屏幕外元素，稍后加載

Question

向下滾動時，我不會淡入元素。 此外，還可以通過單擊按鈕來添加更多元素。 問題是，一旦附加的元素不在屏幕上，它們就不會被動畫顯示，甚至無法顯示。

wow.js和scrollReveal.js以及其他任何東西都發生了，所以這似乎是一個普遍的問題，但是我無法確切弄清楚為什么會發生。

這里一個

樣品

這樣您就會看到確切的問題。

只需按幾次添加按鈕。

編輯

因此，問題是，我有多個div容器彼此嵌套並使用滾動條插件。 無關緊要-每個都會產生此問題。 我通過更改scrollReveal.js-第78行中的一行已解決了該問題：

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

至

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

現在，它的工作原理如何。

如果您在任何scrollbarplugin或wow.js中遇到類似的問題，它也應該解決您的問題。 只需更改相應的視口。

Answer 1

這里的問題是，如果每次添加新元素時都調用window.sr = new ScrollReveal() ，則將刪除對所有具有data-sr的元素的引用，並且僅保存最后一個元素的引用。

相反，您可以調用window.sr.init(true); 。 有關更多詳細信息，請訪問此github項目https://github.com/julianlloyd/scrollReveal.js/blob/master/scrollReveal.js

這是進行上述更改的工作筆： CodePen

Answer 2

因此，問題是，我有多個div容器彼此嵌套並使用滾動條插件。 無關緊要-每個都會產生此問題。 我通過更改scrollReveal.js-第78行中的一行已解決了該問題：

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

至

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

現在，它的工作原理如何。

如果您在任何scrollbarplugin或wow.js中遇到類似的問題，它也應該解決您的問題。 只需更改相應的視口。