Javascript 仅当用户在特定DIV上滚动时显示chart.js动画

我只想在用户滚动页面并到达图表的div时显示图表

现在，图表将页面的加载量加在一起，当我到达图表时，它仍在充电

我用Chart.js制作了这个图表

这是该网站的链接：

我把图表放在“技能”的声音下面

这是我的技能部分：

<section id="skills" class="skills-section">

    <div id="counter">
        <canvas id="polarChart" height="100%"></canvas>
    </div> 

</section>

JS:

$（函数（）{
var oTop=$（'#counter'）.offset（）.top-window.innerHeight；
var oBottom=$（'#contact'）.offset（）.top-window.innerHeight；
var-chartHidden=true；
$（窗口）。滚动（函数（）{
var pTop=$（'body'）.scrollTop（）；
如果（（pTop>oTop）和（&（隐藏图表））{
chartHidden=false；
开始计数（）；
}否则如果（pTopoBottom））{
chartHidden=true；
}
});
});
函数开始计数（）{
var ctx=document.getElementById（“polarChart”）.getContext（“2d”）；
var myChart=新图表（ctx{
类型：“polarArea”，
数据：{
标签：[“Php”、“Css”、“Html”、“Wordpress”、“Magento”、“Photoshop”、“Web Analisis”、“Seo”]，
数据集：[{
背景颜色：[
“#0066ff”，
“#cc3333”，
“#ffba02”，
"#009966",
“#ff6600”，
“#db01de”，
“#00cc33”，
“#00ccff”
],
数据：[65,85,90,95,75,75,85,85]
}]
}
});
}

一旦图表在可见后绘制，
你不想在每个卷轴上都画画

使用标志来了解第一次绘制的时间，请参见

chartHidden

$(function() {
    var oTop = $('#counter').offset().top - window.innerHeight;
    var chartHidden = true;
    $(window).scroll(function(){
        var pTop = $('body').scrollTop();
        if ((pTop > oTop) && (chartHidden)) {
            chartHidden = false;
            start_count();
        }
    });
});

function start_count(){
  var ctx = document.getElementById("polarChart").getContext('2d');
  var myChart = new Chart(ctx, {
      type: 'polarArea',
      data: {
          labels: ["Php", "Css", "Html", "Wordpress", "Magento", "Photoshop", "Web Analisis", "Seo"],
          datasets: [{
              backgroundColor: [
                  "#0066ff",
                  "#cc3333",
                  "#ffba02",
                  "#009966",
                  "#ff6600",
                  "#db01de",
                  "#00cc33",
                  "#00ccff"
              ],
              data: [65, 85, 90, 95, 75, 75, 85, 85]
          }]
      }
  });
}

---

查看以了解用户何时滚动页面并到达图表的div…此解决方案允许我了解元素是否位于页面的可见部分。但我不明白，只有当用户向下滚动时，我如何才能显示我的图表。你能帮我理解吗？我应该在正文底部添加js代码吗？但是之后呢？我不确定我是否明白，您是否正在收听

'scroll'

事件？当启动滚动事件时，使用提供的答案了解何时可见，何时可见绘制图表…我使用上面的JS函数（问题更新）在DOM中查找图表的div，但是现在当我到达div时如何启动图表的JS动画？抱歉，我忘记了，我添加了代码是否还有一种方法可以在我每次浏览这个div时都加载图表（并且每次在另一个视图上移动时都删除图表）？我必须使用这个问题的脚本吗？只需要跟踪

pTop

和

oTop

，如果可以滚动过去，也可能是底部——因此当

pTop

发生时（与上面相反），将

chartHidden

设置回true…我添加了“else if（pToppTop

$(function() {
    var oTop = $('#counter').offset().top - window.innerHeight;
    var chartHidden = true;
    $(window).scroll(function(){
        var pTop = $('body').scrollTop();
        if ((pTop > oTop) && (chartHidden)) {
            chartHidden = false;
            start_count();
        }
    });
});

function start_count(){
  var ctx = document.getElementById("polarChart").getContext('2d');
  var myChart = new Chart(ctx, {
      type: 'polarArea',
      data: {
          labels: ["Php", "Css", "Html", "Wordpress", "Magento", "Photoshop", "Web Analisis", "Seo"],
          datasets: [{
              backgroundColor: [
                  "#0066ff",
                  "#cc3333",
                  "#ffba02",
                  "#009966",
                  "#ff6600",
                  "#db01de",
                  "#00cc33",
                  "#00ccff"
              ],
              data: [65, 85, 90, 95, 75, 75, 85, 85]
          }]
      }
  });
}