带有 EasyPieChart 和 Waypoint 的 JS 未执行

JS with EasyPieChart and Waypoint not executing

我有一个简单的问题,因为我不想深入研究 JS 编码。

以下代码片段有什么问题,为什么没有按预期执行。 (-> 图表一出现就加载)

var waypoint  = new Waypoint({
  element: document.querySelector("#chartcontainer"),
  handler: function() {
    $(".chart").easyPieChart({
      scaleColor: false,
      lineWidth: 20,
      lineCap: "butt",
      barColor: "#9b0000",
      trackColor: "#ecf0f1",
      size: 160,
      animate: 1500
    });
    $(".count").each(function() {
      var $this = $(this);
      $({ Counter: 0 }).animate({ 
        Counter: $this.text() 
      },{
        duration: 1500,
        easing: "swing",
        step: function() {
          $this.text(Math.ceil(this.Counter));
        }
      });
    });
  }
});

我不明白我的脚本做错了什么。解释将有助于(也许)未来的问题。

对于整个代码片段和所有使用的库和框架,请查看相应的代码笔: https://codepen.io/toxicterror/pen/EJPjEQ

Waypoint 实际上会在您滚动经过某个元素时触发。您的笔很可能不够高,无法上下滚动,因此触发了 Waypoint -> EasyPieChart 交互。

我分叉了你的笔并提供了一个演示,表明你的代码确实有效: https://codepen.io/anon/pen/VOmVrJ

我只是将这些行添加到您的 body CSS 以查看它是否确实有效:

  min-height:10000px;
  overflow-y:scroll;

在现实生活中,您很可能不需要它,因为您打算滚动浏览此内容。


编辑:

如果您使用 Waypoint 的 offset 属性,您实际上可以确保它在页面加载和页面滚动时都被触发。尝试像这样使用它:

var waypoint  = new Waypoint({
  element: document.querySelector("#chartcontainer"),
  offset: $("#chartcontainer").height(),
  handler: function() {
    ...

通过将它设置为容器的高度,您可以确保它在触发动画之前完全可见。