Выполнение скрипта в определенном разделе на странице сайта?

Question

[Алексей]

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

<div class="content">
  <h1>Всего шагов</h1>
  <div class="value" akhi="100">0</div> 
</div>

*{
  padding:0;
  margin:0;
}
h1 {
  color: #fff;
}
.content {
  display: flex;
  justify-content: space-around;
  align-items: center;
  background: #030303;
  height: 100vh;
}

.value {
  font-size: 150px;
  display: block;
  font-weight: bold;
  color: #fff;
}

const counters = document.querySelectorAll('.value');
const speed = 200;

counters.forEach( counter => {
   const animate = () => {
      const value = +counter.getAttribute('akhi');
      const data = +counter.innerText;
     
      const time = value / speed;
     if(data < value) {
          counter.innerText = Math.ceil(data + time);
          setTimeout(animate, 1);
        }else{
          counter.innerText = value;
        }
     
   }
   
   animate();
});

или ссылка на codepen

Answer 1

[Rsa97]

Либо по старинке отслеживать событие scroll и вычислять положение нужного блока на экране, либо использовать Intersection Observer и смотреть момент пересечения нужного блока с вьюпортом.