Question

我有一个简单的问题，因为我不打算深入研究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));
        }
      });
    });
  }
});

我不明白自己的脚本做错了什么。作一个解释可能会对（也许）将来的问题有所帮助。

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

Answer 1

当您滚动到某个元素时，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() {
    ...

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

带有EasyPieChart和Waypoint的JS无法执行

1 个答案: