javascript - 需要在视口(viewport)上加载 div

Question

我在 css 中构建了一个动画百分比条，我想延迟动画的加载，直到视口(viewport)到达容器 div。我已经尝试了我可以在谷歌上找到的每一个 lazyload jquery 脚本，但仍然无法让一个来做我需要的。我需要懒加载的内容在div列里面

<section class="parallax-container2">
<img class="responsive-img parallax2" src="images/image2.jpg">
<div class="container">
<div class="row fadeInParagraph">
<div class="col s12 m6 l6 index">
<div class="progresscss"><div id="progressbar"><span class="text">89%
</span><div id="progress" ></div></div><div class="line"></div></div>
<div class="progresscss1"><div id="progressbar1"><span class="text">74%
</span><div id="progress1" ></div></div><div class="line"></div></div>
<div class="progresscss2"><div id="progressbar2"><span class="text">61%
</span><div id="progress2" ></div></div><div class="line"></div></div>
<div class="progresscss3"><div id="progressbar3"><span class="text">85%
</span><div id="progress3" ></div></div><div class="line"></div></div>
</div></div></section>  

Answer 1

你可以试试这个方法来检查你的元素是否在视口(viewport)中，您还需要在滚动事件上触发它，可能正在使用 setTimout，这样它就不会触发太多次。

isScrolledIntoView(elem)
{
    var docViewTop = $(window).scrollTop();
    var docViewBottom = docViewTop + $(window).height();

    var elemTop = $(elem).offset().top;
    var elemBottom = elemTop + $(elem).height();

    return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
}