Как запустить скрипт при достижении нужного блока?

Question

На странице сайта есть блок с 6-ю кругами, скрипт переворачивающий их через 5 сек если на них не навели курсор.

Дело в том что они переворачиваются через 5 сек после загрузки страницы, а надо что бы скрипт отработал только когда до них долистали. Как это сделать? Если можно с примерами

const cards = document.querySelectorAll('.flip-card');
let timerId = setTimeout(() => {
    cards.forEach(card => {
        card.classList.add('flip-card_flipped');
       card.removeEventListener('mouseover', flipped);
      });
}, 5000);

function flipped() {
  clearTimeout(timerId);
  
  cards.forEach(card => {
        card.classList.add('flip-card_flipped');
       card.removeEventListener('mouseover', flipped);
      });
}

cards.forEach(card => card.addEventListener('mouseover', flipped));

Answer 1

Вот типичная реализация события onScrolledTo возникающего при прокручивании документа до искомого элемента:

//*********************************************

function onScrolledTo(el, callback) {

  // Определяем нормализованное смещение элемента в видимой области окна (от 0 до 1)
  // 0 = элемент выехал снизу из под экрана ... 1 = элемент заехал вверх под экран
  function normOffset() {
    var eR = el.getBoundingClientRect();
    return 1.0 - eR.bottom / (window.innerHeight + el.offsetHeight);
  }

  // Выполнение задачи
  function taskUpdate() {
    if (normOffset() > 0) {
      window.removeEventListener('resize', onUpdate);
      window.removeEventListener('scroll', onUpdate);
      callback();
    }
  }

  // Слушатель
  function onUpdate(event) {
    taskUpdate();
  }

  // Запуск задачи
  window.addEventListener('resize', onUpdate);
  window.addEventListener('scroll', onUpdate);
  taskUpdate();

}

//*********************************************

onScrolledTo(document.getElementById('el'), function() {
  alert("Вы доскролили до нужного блока");
});

<div style="height: 1000px;"></div>
<div style="background: yellow;" id="el">Нужный блок
  <pre>
  __________
 ///////////\
///////////  \
|    _    |  |
|[] | | []|[]|
|   | |   |  |
</pre>
</div>
<div style="height: 1000px;"></div>

БЛОГ НА HUSL

Как запустить скрипт при достижении нужного блока?

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