function isInViewport(element) {
  const rect = element.getBoundingClientRect();
  return (
      rect.top >= 0 &&
      rect.left >= 0 &&
      rect.bottom <= (window.innerHeight - 100 || document.documentElement.clientHeight - 100) &&
      rect.right <= (window.innerWidth || document.documentElement.clientWidth)
      );
    }
let cards = document.getElementsByClassName('cardSolution');



for (let i = 0; i < cards.length; i++) {
  const card = cards[i];
  if (isInViewport(card)) {
    card.classList.add('active')
  } else {
    card.classList.remove('active')
  }
}

window.onscroll = function (e) {
  for (let i = 0; i < cards.length; i++) {
    const card = cards[i];
    if (isInViewport(card)) {
      card.classList.add('active')
    } else {
      card.classList.remove('active')
    }
  }
}

console.log("100")