javascript - 当滚动到达它（JS）时，计数器脚本应该运行，我该怎么做？

Question

任务是在网站上制作一个计数器脚本，我设法实现了计数器脚本，但现在我需要它通过滚动来工作。请帮忙，我如何向这个计数器脚本添加一个滚动事件，以便当我滚动到它时它会触发 1 次？

==================================================== =======================

  const counters = document.querySelectorAll('.number');
    counters.forEach((number) => {
    number.innerHTML = "0";

        const updateCounter = () => {
            const target = +number.getAttribute("data-target");
            const c = +number.innerText;

            if (c < target) {
                number.innerText = c + 1;
                setTimeout(updateCounter, 100);
            } else {
                number.innerText = target;
            }
        };
        updateCounter();
    })

* {
 box-sizing: border-box;
 background-color: gray;
 margin: 20px auto;
}

.long-text {
  font-size: 16px;
  max-width: 500px;
  text-align: center;
}

.form-count {
  max-width: 324px;
  padding-left: 15px;
  color: #fff;
  font-weight: 900;
  text-align: center;
}

.form-count__title {
  font-size: 30px;
  line-height: 36px;
}

.number-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 50px 0;
}

.thousand {
  font-weight: 900;
  font-size: 96px;
  text-align: center;
  color: #c40b0b;
}

.number {
  font-weight: 900;
  font-size: 96px;
  line-height: 56px;
  text-align: center;
  color: #c40b0b;
}

.form-count__text {
  font-size: 19px;
  line-height: 26px;
}

<p class="long-text"> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Sint enim non animi nam aliquid repudiandae vel quod quaerat? Quasi maiores reprehenderit minus deserunt deleniti illo.


Lorem ipsum, dolor sit amet consectetur adipisicing elit. Sint enim non animi nam aliquid repudiandae vel quod quaerat? Quasi maiores reprehenderit minus deserunt deleniti illo
  
  Lorem ipsum, dolor sit amet consectetur adipisicing elit. Sint enim non animi nam aliquid repudiandae vel quod quaerat? Quasi maiores reprehenderit minus deserunt deleniti illo
  
  
  Lorem ipsum, dolor sit amet consectetur adipisicing elit. Sint enim non animi nam aliquid repudiandae vel quod quaerat? Quasi maiores reprehenderit minus deserunt deleniti illo
  
  
  Lorem ipsum, dolor sit amet consectetur adipisicing elit. Sint enim non animi nam aliquid repudiandae vel quod quaerat? Quasi maiores reprehenderit minus deserunt deleniti illo
  
  
  Lorem ipsum, dolor sit amet consectetur adipisicing elit. Sint enim non animi nam aliquid repudiandae vel quod quaerat? Quasi maiores reprehenderit minus deserunt deleniti illo
  
  
  Lorem ipsum, dolor sit amet consectetur adipisicing elit. Sint enim non animi nam aliquid repudiandae vel quod quaerat? Quasi maiores reprehenderit minus deserunt deleniti illo
  
  Lorem ipsum, dolor sit amet consectetur adipisicing elit. Sint enim non animi nam aliquid repudiandae vel quod quaerat? Quasi maiores reprehenderit minus deserunt deleniti illo
  Lorem ipsum, dolor sit amet consectetur adipisicing elit. Sint enim non animi nam aliquid repudiandae vel quod quaerat? Quasi maiores reprehenderit minus deserunt deleniti illoLorem ipsum, dolor sit amet consectetur adipisicing elit. Sint enim non animi nam aliquid repudiandae vel quod quaerat? Quasi maiores reprehenderit minus deserunt deleniti illoLorem ipsum, dolor sit amet consectetur adipisicing elit. Sint enim non animi nam aliquid repudiandae vel quod quaerat? Quasi maiores reprehenderit minus deserunt deleniti illoLorem ipsum, dolor sit amet consectetur adipisicing elit. Sint enim non animi nam aliquid repudiandae vel quod quaerat? Quasi maiores reprehenderit minus deserunt deleniti illoLorem ipsum, dolor sit amet consectetur adipisicing elit. Sint enim non animi nam aliquid repudiandae vel quod quaerat? Quasi maiores reprehenderit minus deserunt deleniti illoLorem ipsum, dolor sit amet consectetur adipisicing elit. Sint enim non animi nam aliquid repudiandae vel quod quaerat? Quasi maiores reprehenderit minus deserunt deleniti illoLorem ipsum, dolor sit amet consectetur adipisicing elit. Sint enim non animi nam aliquid repudiandae vel quod quaerat? Quasi maiores reprehenderit minus deserunt deleniti illoLorem ipsum, dolor sit amet consectetur adipisicing elit. Sint enim non animi nam aliquid repudiandae vel quod quaerat? Quasi maiores reprehenderit minus deserunt deleniti illoLorem ipsum, dolor sit amet consectetur adipisicing elit. Sint enim non animi nam aliquid repudiandae vel quod quaerat? Quasi maiores reprehenderit minus deserunt deleniti illoLorem ipsum, dolor sit amet consectetur adipisicing elit. Sint enim non animi nam aliquid repudiandae vel quod quaerat? Quasi maiores reprehenderit minus deserunt deleniti illoLorem ipsum, dolor sit amet consectetur adipisicing elit. Sint enim non animi nam aliquid repudiandae vel quod quaerat? Quasi maiores reprehenderit minus deserunt deleniti illoLorem ipsum, dolor sit amet consectetur adipisicing elit. Sint enim non animi nam aliquid repudiandae vel quod quaerat? Quasi maiores reprehenderit minus deserunt deleniti illoLorem ipsum, dolor sit amet consectetur adipisicing elit. Sint enim non animi nam aliquid repudiandae vel quod quaerat? Quasi maiores reprehenderit minus deserunt deleniti illo
</p>

<div class="form-count" id="box">
  <div class="number-wrap">
    <div id="showScroll" class="number" data-target="17">                </div>
    <span class="thousand">k</span>
  </div>
</div>

标签： javascript

Answer 1

你的诀窍是Intersection Observer

您可以看到我为这些number项目添加了一个观察者，当它们 100% 出现在视口中时，您的计数器将启动。当您部分滚动出视口事件时，它也会停止。这是由于threshold设置为 1.0。您可以根据需要使用它

const counters = document.querySelectorAll('.number');

const updateCounter = (number, e) => {
  const target = +number.getAttribute("data-target");
  const c = +number.innerText;

  if (c < target && e.intersectionRatio === 1) {
    number.innerText = c + 1;
    setTimeout(() => updateCounter(number, e), 100);
  }
};


function createObserver(number) {
  let observer;

  let options = {
    threshold: 1
  };

  observer = new IntersectionObserver(([e]) => updateCounter(number, e), options);
  observer.observe(number);
}

counters.forEach(number => {
  number.innerHTML = "0";
  createObserver(number)
})

* {
 box-sizing: border-box;
 background-color: gray;
 margin: 20px auto;
}

.long-text {
  font-size: 16px;
  max-width: 500px;
  text-align: center;
}

.form-count {
  max-width: 324px;
  padding-left: 15px;
  color: #fff;
  font-weight: 900;
  text-align: center;
}

.form-count__title {
  font-size: 30px;
  line-height: 36px;
}

.number-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 50px 0;
}

.thousand {
  font-weight: 900;
  font-size: 96px;
  text-align: center;
  color: #c40b0b;
}

.number {
  font-weight: 900;
  font-size: 96px;
  line-height: 56px;
  text-align: center;
  color: #c40b0b;
}

.form-count__text {
  font-size: 19px;
  line-height: 26px;
}

<p class="long-text"> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Sint enim non animi nam aliquid repudiandae vel quod quaerat? Quasi maiores reprehenderit minus deserunt deleniti illo.


Lorem ipsum, dolor sit amet consectetur adipisicing elit. Sint enim non animi nam aliquid repudiandae vel quod quaerat? Quasi maiores reprehenderit minus deserunt deleniti illo
  
  Lorem ipsum, dolor sit amet consectetur adipisicing elit. Sint enim non animi nam aliquid repudiandae vel quod quaerat? Quasi maiores reprehenderit minus deserunt deleniti illo
  
  
  Lorem ipsum, dolor sit amet consectetur adipisicing elit. Sint enim non animi nam aliquid repudiandae vel quod quaerat? Quasi maiores reprehenderit minus deserunt deleniti illo
  
  
  Lorem ipsum, dolor sit amet consectetur adipisicing elit. Sint enim non animi nam aliquid repudiandae vel quod quaerat? Quasi maiores reprehenderit minus deserunt deleniti illo
  
  
  Lorem ipsum, dolor sit amet consectetur adipisicing elit. Sint enim non animi nam aliquid repudiandae vel quod quaerat? Quasi maiores reprehenderit minus deserunt deleniti illo
  
  
  Lorem ipsum, dolor sit amet consectetur adipisicing elit. Sint enim non animi nam aliquid repudiandae vel quod quaerat? Quasi maiores reprehenderit minus deserunt deleniti illo
  
  Lorem ipsum, dolor sit amet consectetur adipisicing elit. Sint enim non animi nam aliquid repudiandae vel quod quaerat? Quasi maiores reprehenderit minus deserunt deleniti illo
  Lorem ipsum, dolor sit amet consectetur adipisicing elit. Sint enim non animi nam aliquid repudiandae vel quod quaerat? Quasi maiores reprehenderit minus deserunt deleniti illoLorem ipsum, dolor sit amet consectetur adipisicing elit. Sint enim non animi nam aliquid repudiandae vel quod quaerat? Quasi maiores reprehenderit minus deserunt deleniti illoLorem ipsum, dolor sit amet consectetur adipisicing elit. Sint enim non animi nam aliquid repudiandae vel quod quaerat? Quasi maiores reprehenderit minus deserunt deleniti illoLorem ipsum, dolor sit amet consectetur adipisicing elit. Sint enim non animi nam aliquid repudiandae vel quod quaerat? Quasi maiores reprehenderit minus deserunt deleniti illoLorem ipsum, dolor sit amet consectetur adipisicing elit. Sint enim non animi nam aliquid repudiandae vel quod quaerat? Quasi maiores reprehenderit minus deserunt deleniti illoLorem ipsum, dolor sit amet consectetur adipisicing elit. Sint enim non animi nam aliquid repudiandae vel quod quaerat? Quasi maiores reprehenderit minus deserunt deleniti illoLorem ipsum, dolor sit amet consectetur adipisicing elit. Sint enim non animi nam aliquid repudiandae vel quod quaerat? Quasi maiores reprehenderit minus deserunt deleniti illoLorem ipsum, dolor sit amet consectetur adipisicing elit. Sint enim non animi nam aliquid repudiandae vel quod quaerat? Quasi maiores reprehenderit minus deserunt deleniti illoLorem ipsum, dolor sit amet consectetur adipisicing elit. Sint enim non animi nam aliquid repudiandae vel quod quaerat? Quasi maiores reprehenderit minus deserunt deleniti illoLorem ipsum, dolor sit amet consectetur adipisicing elit. Sint enim non animi nam aliquid repudiandae vel quod quaerat? Quasi maiores reprehenderit minus deserunt deleniti illoLorem ipsum, dolor sit amet consectetur adipisicing elit. Sint enim non animi nam aliquid repudiandae vel quod quaerat? Quasi maiores reprehenderit minus deserunt deleniti illoLorem ipsum, dolor sit amet consectetur adipisicing elit. Sint enim non animi nam aliquid repudiandae vel quod quaerat? Quasi maiores reprehenderit minus deserunt deleniti illoLorem ipsum, dolor sit amet consectetur adipisicing elit. Sint enim non animi nam aliquid repudiandae vel quod quaerat? Quasi maiores reprehenderit minus deserunt deleniti illo
</p>

<div class="form-count" id="box">
  <div class="number-wrap">
    <div id="showScroll" class="number" data-target="17">                </div>
    <span class="thousand">k</span>
  </div>
</div>