В чем проблема скрипта для анимации цифр при скролле?

Question

[sadboy]

написал скрипт для анимации цифр, он хорошо работает для одного элемента, а если мне нужно сразу анимировать несколько элементов на странице, то анимируется только первый https://jsfiddle.net/zapaza10/3tfd4z4n/173/

Answer 1

[0xD34F]

Ну так querySelector возвращает один элемент. Надо использовать querySelectorAll:

document.querySelectorAll('.number').forEach(function(n) {
  const top = n.getBoundingClientRect().top;
  const end = +n.dataset.max;

  window.addEventListener('scroll', function onScroll() {
    if (window.pageYOffset > top - window.innerHeight / 2) {
      this.removeEventListener('scroll', onScroll);
      let start = +n.innerHTML;
      const interval = setInterval(function() {
        n.innerHTML = ++start;
        if (start === end) {
          clearInterval(interval);
        }
      }, 5);
    }
  });
});

Comments

[sadboy]

Спасибо!