@sadboy
Верстальщик

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

написал скрипт для анимации цифр, он хорошо работает для одного элемента, а если мне нужно сразу анимировать несколько элементов на странице, то анимируется только первый https://jsfiddle.net/zapaza10/3tfd4z4n/173/
  • Вопрос задан
  • 41 просмотр
Решения вопроса 1
0xD34F
@0xD34F Куратор тега JavaScript
Ну так 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);
    }
  });
});
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы