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

【问题标题】：Show chart.js animation only when user scroll on the specific DIV仅当用户在特定 DIV 上滚动时才显示 chart.js 动画
【发布时间】：2017-04-18 16:05:08
【问题描述】：

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

现在图表与页面加载一起收费，当我到达图表时，它已经收费。

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

这是网站的链接： http://www.matteoschiatti.it/

我有“技能”声音下的图表。

这是我的技能部分：

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

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

</section>

JS：

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

        if ((pTop > oBottom)) {
            chartHidden = true;
        }
    });
});

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]
          }]
      }
  });
}

【问题讨论】：

查看this answer以了解用户何时滚动页面并到达图表的div...
这个解决方案让我了解元素是否在页面的可见部分。但是我不明白只有当用户向下滚动时我才能显示我的图表。你能帮我理解吗？我应该在正文底部添加js代码吗？但是之后呢？
不确定我是否关注，您在收听'scroll' 事件吗？当滚动事件被触发时，使用提供的答案知道何时可见，何时可见绘制图表...
我使用上面的JS函数（问题更新）在DOM中找到图表的div，但是现在我到达div时如何启动图表的js动画？
对不起，我忘记了，我添加了代码

标签： javascript jquery charts scroll chart.js

【解决方案1】：

一旦图表在可见后绘制，
您不想每次滚动都继续绘制

使用标志知道它是什么时候第一次绘制的，见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 的所有时间加载图表（并在我移动到另一个视图时删除图表）？我必须为此使用这个问题的脚本吗？ stackoverflow.com/questions/487073/…
只需要跟踪pTop和oTop，如果可以滚动过去，可能还需要跟踪底部——所以当pTop < oTop发生时（与上面相反），设置chartHidden回归真实...
我添加了 ' else if (pTop
我在函数中添加了另一个 var 和另一个 if 现在可以按我的意愿工作，但不是很好，我认为存在一些冲突。我更新了上面的代码。
当你说不太好时，怎么会呢？查看代码，从底部向上滚动时，图表似乎不会绘制，直到到达图表容器的顶部。可能想画的时候pTop < oBottom