JS avec EasyPieChart et Waypoint ne s'exécute pas

Question

J'ai une question simple car je ne suis pas très calé en codage JS.

Qu'est-ce qui ne va pas avec l'extrait de code suivant et pourquoi ne s'exécute-t-il pas comme prévu. (-> chargement des graphiques dès qu'ils sont affichés)

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

Je ne comprends pas ce que j'ai fait de mal avec mon script. Une explication serait utile pour des problèmes (peut-être) futurs.

Pour le snippet complet et toutes les bibliothèques et frameworks utilisés, consultez le codepen correspondant : https://codepen.io/toxicterror/pen/EJPjEQ

Answer 1

Le point de repère se déclenche lorsque vous faites défiler un élément. Votre stylo n'est probablement pas assez grand pour vous permettre de faire défiler les éléments vers le haut ou vers le bas, ce qui déclenche l'interaction Waypoint -> EasyPieChart.

J'ai fait un fork de votre plume et j'ai fourni une démo qui montre que votre code fonctionne réellement : https://codepen.io/anon/pen/VOmVrJ

J'ai simplement ajouté ces lignes à votre body CSS pour voir qu'il fonctionne réellement :

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

Dans un scénario réel, vous n'en aurez probablement pas besoin puisque vous prévoyez de faire défiler ce contenu.

---

EDIT :

Si vous utilisez le offset de Waypoint, vous pouvez vous assurer qu'il est déclenché à la fois au chargement et au défilement de la page. Essayez de l'utiliser comme suit :

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

En le fixant à la hauteur du conteneur, vous vous assurez qu'il est entièrement visible avant de déclencher l'animation.