滚动显示'no elements found'？

Question

我一直在摆弄一些 javascript 库，这些库可能会帮助我创建一个我期待创建的投资组合网站。但是，我运行遇到了 scrollreveal.js 库的问题。当我加载站点（本地测试）时，我在控制台中得到了这个 ScrollReveal: reveal on ".example" failed, no elements found.

这是我的代码

HTML:

<div id="mainContent1">

<div class="example" data-scroll></div>

</div>

CSS:

.example {
    height: 150px;
    width: 150px;
    background-color: #000000;
    display: block;
    margin-top: 150vh; //just to be able to scroll down for sr effect
}

Javascript:

window.sr = ScrollReveal ();
sr.reveal('.example');

我根本无法让它工作，希望得到任何帮助。谢谢！

Answer 1

确保 ScrollReveal 库的 link 就在您的结束标记之前。并确保您的脚本在那之后。

如果您的脚本位于顶部，它将查找页面上尚未出现的元素。

滚动显示'no elements found'？

ScrollReveal 'no elements found'?

html

javascript

css

scrollreveal.js