Javascript 在视图中加载div内的图表饼图

我正在使用，我希望它只在用户向下滚动到.skills部分时加载。我正在使用

我试过这样做：

<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>

（功能（）{
if（$（“.skills:在视口中”））{
getScript（“js/jQuery.easypiechart.min.js”）.done（函数（）{
$（'.chart'）.easyPieChart({
放松：“放松反弹”，
onStep：函数（从，到，百分比）{
$（this.el）.find（'.percent'）.text（Math.round（percent））；
}
});
});
};
});

它在视点中时不显示

---

谢谢

您可以在不使用视口插件的情况下执行此操作。您可以使用

$（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;
    }
}

---

@马可·博内利（Marco Bonelli）手机友好吗？@Bhaiya是（也取决于piechart库）