@Bro010101

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

Здравствуйте!
Возник вопрос, как задать условие, что бы скрипт стал выполняться, только при прокрутке до необходимого раздела сайта?
Есть счетчик, он запускается сразу при загрузке страницы, а нужно что бы в определенном блоке на странице сайта. Подскажите, как это можно сделать?
<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
  • Вопрос задан
  • 42 просмотра
Решения вопроса 1
Rsa97
@Rsa97
Для правильного вопроса надо знать половину ответа
Либо по старинке отслеживать событие scroll и вычислять положение нужного блока на экране, либо использовать Intersection Observer и смотреть момент пересечения нужного блока с вьюпортом.
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

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

Похожие вопросы