javascript - 当它位于视口(viewport)中时，将图表饼加载到 div 中

Question

我正在使用easypiechart plugin我希望它仅在用户向下滚动到 .skills div 时加载它。我正在使用viewport plugin .

我尝试过这样的:

<script src="js/viewport.js"></script>
<script>
    (function(){
    if ($(".skills:in-viewport")){
    jQuery.getScript("js/jquery.easypiechart.min.js").done(function() {
        $('.chart').easyPieChart({
            easing: 'easeOutBounce',
            onStep: function(from, to, percent) {
                $(this.el).find('.percent').text(Math.round(percent));
            }
        });
    });
    };
    });
    </script>

在视点中时不会显示。

谢谢!

Answer 1

无需视口(viewport)插件即可完成此操作。您可以使用 $(window).height() ，当用户向下滚动时，您检查您想要图表的 div 的距离是否小于滚动距离+ $(window).height()，如果是这样，你就画它。

这是代码:

var el = document.getElementById('your-div'),
    topDistance = el.getBoundingClientRect().top,
    drawn = false;

function drawPieChart() {
    jQuery.getScript("js/jquery.easypiechart.min.js").done(function() {
        $('.chart').easyPieChart({
            easing: 'easeOutBounce',
            onStep: function(from, to, percent) {
                $(this.el).find('.percent').text(Math.round(percent));
            }
        });
    });
}

function handleScroll() {
    if (document.body.scrollTop + $(window).height() > topDistance) {
        drawn || drawPieChart();
        drawn = true;
    }
}