JS с EasyPieChart и Waypoint не выполняется - PullRequest
Новая
       42

JS с EasyPieChart и Waypoint не выполняется

3 голосов
/ 14 мая 2019

У меня простой вопрос, так как я не слишком углубляюсь в 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

1 Ответ

1 голос
/ 14 мая 2019

Путевая точка фактически срабатывает при прокрутке мимо элемента.Скорее всего, ваша ручка недостаточно высока, чтобы вы могли прокручивать ее вверх и вниз, что вызывает взаимодействие Waypoint -> EasyPieChart.

Я разветвил вашу ручку и предоставил демонстрацию, показывающую, что ваш код действительно работает: https://codepen.io/anon/pen/VOmVrJ

Я просто добавил эти строки в ваш body CSS, чтобы убедиться, что он действительно работает: 

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

В сценарии из реальной жизни вам, скорее всего, он не понадобится, поскольку выВы планируете прокрутить этот контент.

РЕДАКТИРОВАТЬ:

Если вы используете свойство offset Waypoint, вы можете быть уверены, что оно запускается при загрузке страницы,и на странице прокрутки.Попробуйте использовать его так: 

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

Установив его на высоту контейнера, вы убедитесь, что он полностью виден, прежде чем запускать анимацию.

...