Как запустить функцию при скроле?

Question

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

const time = 3000;
const step = 1;

function counter(num, elem) {
    let idNum = document.querySelector('#' + elem);
    let n = 0;
    let t = Math.round(time / (num / step));
    let interval = setInterval(() => {
        n = n + step;
        if (n == num) {
            clearInterval(interval);
        }
        idNum.innerHTML = n;
    }, t);
}
counter(93, 'about-1');
counter(206, 'about-2');
counter(71, 'about-3');

Answer 1

Весь код, Как реализовать тебе Подобное я, конечно, не напишу, но один из вариантов решения, возможно, следующий.

А)узнать где находиться элемент счётчика на странице в координатах. Это можно сделать, используя getBoundingClientRect() и возможно еще что - то дописать под свою ситуацию.

б) Поставить обработчик на скрол и, зная координаты по оси Y элемента, полученные в предыдущем шаге, высчитывать, когда они появятся на экране, и тогда запускать счетчик.

Answer 2

Пример

const time = 3000;
const step = 1;

function counter(num, elem) {
  let idNum = document.querySelector('#' + elem);
  let n = 0;
  let t = Math.round(time / (num / step));
  let interval = setInterval(() => {
    n = n + step;
    if (n == num) {
      clearInterval(interval);
    }
    idNum.innerHTML = n;
  }, t);
}




const target = document.querySelector('.content');

function handleIntersection(entries) {
  entries.map((entry) => {
    if (entry.isIntersecting) {
      console.log('Content')
      counter(93, 'about-1');
      counter(206, 'about-2');
      counter(71, 'about-3');
    }
  });
}

const observer = new IntersectionObserver(handleIntersection);
observer.observe(target);

* {
  box-sizing: border-box;
}

header {
  height: 100px;
  background: #ccc;
  min-height: 100vh;
}

.content {
  background: tomato;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9vw;
  gap: 1.25rem;
}

footer {
  min-height: 100vh;
  background-color: #222;
  color: #fff;
}

<header>
  header
</header>

<div class="content">

  <div id="about-1"></div>
  <div id="about-2"></div>
  <div id="about-3"></div>

</div>

<footer>
  footer
</footer>

БЛОГ НА HUSL

Как запустить функцию при скроле?

Ответы (2 шт):