如何实现JavaScript数字计数器仅在滚动到对应区域时启动

实现方案 #

核心逻辑是通过IntersectionObserver API监听计数器所在区块的可见性，仅当区块进入可视区域后才启动计数逻辑，你原有HTML代码无需修改，直接替换JS代码即可生效：

// 声明定时器变量，初始不赋值
let pacijenti, procenat, klinika;
let count1 = 0;
let count2 = 0;
let count3 = 0;
// 计数器是否已经启动的标志，避免重复触发
let counterStarted = false;

// 原有计数逻辑保留
function pacijenata() {
  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);
  }
}

// 初始化可见性观察者
const observer = new IntersectionObserver((entries) => {
  const entry = entries[0];
  // 当元素进入可视区且还未启动过计数时触发
  if (entry.isIntersecting && !counterStarted) {
    counterStarted = true;
    // 重置数字初始显示
    document.querySelector("#number1").innerHTML = '0+';
    document.querySelector("#number2").innerHTML = '0%';
    document.querySelector("#number3").innerHTML = '0';
    // 启动三个计数器
    pacijenti = setInterval(pacijenata, 300);
    procenat = setInterval(procenatIzlecenosti, 60);
    klinika = setInterval(klinike, 400);
    // 计数启动后停止监听，节省性能
    observer.unobserve(entry.target);
  }
}, {
  threshold: 0.1 // 元素露出10%时触发，可根据需求调整数值
})

// 绑定要监听的计数器区块
observer.observe(document.querySelector('#brojac'))

内容的提问来源于stack exchange，提问作者Nexibald