JS Counter starts on scroll

Question

I ran into a problem with my Counter on website which Im building. I made Counter and it's working perfect, the problem is that it works constantly, not when scrolling to the section where it is located. So I want just make it to start count when it comes section where he is. Hope you guys understand me, and I would be grateful to anyone who wants to help me. Here is my JavaScript code:

var pacijenti = setInterval(pacijenata, 300);
var procenat = setInterval(procenatIzlecenosti, 60);
var klinika = setInterval(klinike, 400);
let count1 = 0;
let count2 = 0;
let count3 = 0;


function pacijenata() {
  count1 = count1 += 1000;
  document.querySelector("#number1").innerHTML = count1 + "+";
  if( count1 === 10000 ) {
    clearInterval(pacijenti);
  }
}
function procenatIzlecenosti() {
  count2++;
  document.querySelector("#number2").innerHTML = count2 + "%";
  if( count2 === 70 ) {
    clearInterval(procenat);
  }
}
function klinike() {
  count3++;
  document.querySelector("#number3").innerHTML = count3;
  if( count3 === 4 ) {
    clearInterval(klinika);
  }
}

<section id="brojac">
          <div class="counterContainer">
                <ul>
                    <li>
                        <i class="fas fa-hospital-user"></i>
                        <p id="number1" class="number">10000</p>
                        <p>Pacijenata</p>
                    </li>
                    <li>
                        <i class="fas fa-universal-access"></i>
                        <p id="number2" class="number">70</p>
                        <p>Procenat izlečenosti</p>
                    </li>
                    <li>
                        <i class="fas fa-clinic-medical"></i>
                        <p id="number3" class="number">4</p>
                        <p>Klinike</p>
                    </li>
                </ul>
          </div>
      </section>

score 0 · Answer 1 · answered Aug 07 '21 at 13:44

What you need is a way to start the counter when a certain element comes into view: You can use this custom code for that (adapted from this answer):

const counterSection = document.getElementById("brojac");
let counterStarted = false;

const counterScrolledIntoView = () => {
    const docViewTop = window.scrollTop;
    const docViewBottom = docViewTop + window.height();

    const counterSectionTop = counterSection.offset().top;
    const counterSectionBottom = counterSection + counterSection.height();

    return ((counterSectionBottom <= docViewBottom) && (counterSectionTop >= docViewTop));
}

Then you need to attach an event listener for scroll events:

document.addEventListener('scroll', () => {
  const counterInView = counterScrolledIntoView();
  if (!counterStarted && counterInView) {
    // The element just got scrolled into view, (re)start the counter
    counterStarted = true;
    /*
      var pacijenti = setInterval(pacijenata, 300);
      var procenat = setInterval(procenatIzlecenosti, 60);
      var klinika = setInterval(klinike, 400);
      let count1 = 0;
      let count2 = 0;
      let count3 = 0;
    */
  } else if (!counterInView) {
    counterStarted = false;
  }
})

score 0 · Answer 2 · answered Aug 07 '21 at 14:08

let count1 = 0;
let count2 = 0;
let count3 = 0;

var pacijenti = setInterval(pacijenata, 300);
var procenat = setInterval(procenatIzlecenosti, 60);
var klinika = setInterval(klinike, 400);

let scrolldown = false;

document.getElementById('brojac').addEventListener('scroll', function(e) {
  scrolldown = true;
  if( count1 === 10000 ) { clearInterval(pacijenti); }
  if( count2 === 70 ) { clearInterval(procenat); }
  if( count3 === 4 ) { clearInterval(klinika); }
  setTimeout(function(){ scrolldown = false; },250);
});

function pacijenata() {
  if( scrolldown === true ){
    count1 += 10;
    document.querySelector("#number1").innerHTML = count1 + "+";
  }
}
function procenatIzlecenosti() {
  if(scrolldown === true){
    count2 += 1;
    document.querySelector("#number2").innerHTML = count2 + "%";
  }

}
function klinike() {
  if( scrolldown === true ){
    count3 += 1;
    document.querySelector("#number3").innerHTML = count3;
  }
}

#brojac{
  height:100px;
  overflow:scroll;
}

<section id="brojac">
          <div class="counterContainer">
                <ul>
                    <li>
                        <i class="fas fa-hospital-user"></i>
                        <p id="number1" class="number">0</p>
                        <p>Pacijenata</p>
                    </li>
                    <li>
                        <i class="fas fa-universal-access"></i>
                        <p id="number2" class="number">0</p>
                        <p>Procenat izlečenosti</p>
                    </li>
                    <li>
                        <i class="fas fa-clinic-medical"></i>
                        <p id="number3" class="number">0</p>
                        <p>Klinike</p>
                    </li>
                </ul>
          </div>
      </section>

score 0 · Answer 3 · answered Aug 07 '21 at 14:20

0

You can use Intersection Observer API to initiate the countdown when your target element is visible or intersected in the view port .

answered Aug 07 '21 at 14:20

Muhammed shakir CK

151
1
4

JS Counter starts on scroll

3 Answers3