当特定的 div 进入视图时如何启动计数器

Question

我有一个 plugins.init.js 文件，其中这个 try catch 在页面加载时运行。 我希望它在反值 div 出现时运行。 有没有办法在看到 div 时只运行一次

try {
  const counter = document.querySelectorAll(".counter-value");
  const speed = 2500; // The lower the slower

  counter.forEach((counter_value) => {
    const updateCount = () => {
      const target = +counter_value.getAttribute("data-target");
      const count = +counter_value.innerText;

      // Lower inc to slow and higher to slow
      var inc = target / speed;

      if (inc < 1) {
        inc = 1;
      }

      // Check if target is reached
      if (count < target) {
        // Add inc to count and output in counter_value
        counter_value.innerText = (count + inc).toFixed(0);
        // Call function every ms
        setTimeout(updateCount, 1);
      } else {
        counter_value.innerText = target;
      }
    };

    updateCount();
  });
} catch (err) {}

Answer 1

您可以使用浏览器中的 Intersection Observer API 来做到这一点。

观察者将等待指定的元素进入视图，然后在发生时执行 som 回调。

你可以在这里阅读它。

祝你好运！