解决Counter Up JQuery计数器重复滚动时停止在随机数的问题

本文旨在解决在使用Counter Up jquery插件时，当页面滚动导致计数器元素重新进入视口时，计数器停止在随机数而非重新计数的问题。通过使用Intersection Observer API，我们可以精确地控制计数器的启动时机，确保每次元素进入视口时都能正确地从零开始计数，从而避免计数器停止在随机数的情况。

问题分析

使用 Counter Up 插件时，一个常见的问题是当元素离开视口后再次进入时，计数器不会重新从初始值开始计数，而是停留在上次滚动离开视口时的数值。这通常是因为 Counter Up 默认的行为是一旦计数器启动，就不会再次启动。

解决方案：使用 Intersection Observer API

为了解决这个问题，我们可以使用 Intersection Observer API 来监听计数器元素是否进入视口。当元素进入视口时，我们启动计数器；当元素离开视口时，我们重置计数器的状态，以便下次进入视口时能够重新计数。

以下是具体的实现步骤：

1. 引入 Counter Up 2 库:

首先，确保你已经引入了 Counter Up 2 库。

<script src="https://unpkg.com/counterup2@2.0.2/dist/index.js"></script>

2. html 结构:

你的 HTML 结构应该包含带有 counter 类的元素，这些元素将作为计数器的目标。

<div class="row g-4 mb-4">   <div class="col-sm-6">     <div class="d-flex align-items-center border-start border-5 border-primary px-3">       <h1 class="about-numbers counter">10</h1>       <div class="ps-4">         <p class="mb-0 about-text">Years of</p>         <h6 class="text-uppercase mb-0 about-bold">Experience</h6>       </div>     </div>   </div>   <div class="col-sm-6">     <div class="d-flex align-items-center border-start border-5 border-primary px-3">       <h1 class="about-numbers">+</h1>       <h1 class="about-numbers counter">5000</h1>       <div class="ps-4">         <p class="mb-0 about-text">Products</p>         <h6 class="text-uppercase mb-0 about-bold">Sold</h6>       </div>     </div>   </div> </div>

3. JavaScript 代码:

使用 Intersection Observer API 监听 counter 元素，并在元素进入视口时启动计数器。

const counterUp = window.counterUp.default;  const callback = entries => {   entries.foreach(entry => {     const el = entry.target;     if (entry.isIntersecting && !el.classList.contains('is-visible')) {       counterUp(el, {         duration: 500,         delay: 10,       });       el.classList.add('is-visible');     } else {       el.classList.remove('is-visible');     }   }); };  const IO = new IntersectionObserver(callback, {   threshold: 1 });  const els = document.querySelectorAll('.counter'); els.forEach((el) => {   IO.observe(el); });

代码解释:

• counterUp: 获取 Counter Up 2 的默认导出函数。
• callback: Intersection Observer 的回调函数，当被观察的元素进入或离开视口时触发。
• entry.isIntersecting: 判断元素是否进入视口。
• el.classList.contains(‘is-visible’): 检查元素是否已经计数过。使用 is-visible 类来标记已经计数过的元素，避免重复计数。
• counterUp(el, { duration: 500, delay: 10 }): 启动 Counter Up 计数器，duration 设置计数持续时间，delay 设置计数器启动的延迟。
• el.classList.add(‘is-visible’): 标记元素已经计数过。
• el.classList.remove(‘is-visible’): 当元素离开视口时，移除 is-visible 类，允许下次进入视口时重新计数。
• IO: Intersection Observer 实例，用于监听元素是否进入视口。
• threshold: 1: 设置阈值为 1，表示当元素完全进入视口时触发回调函数。
• els: 获取所有带有 counter 类的元素。
• els.forEach((el) => { IO.observe(el) }): 遍历所有 counter 元素，并使用 Intersection Observer 监听它们。

4. css (可选):

如果需要，可以添加一些 CSS 样式来调整计数器的外观。

.row{height:1000px;} /* 为了演示滚动效果，设置 row 的高度 */

注意事项

• 确保引入了 jQuery 库，因为 Counter Up 依赖于 jQuery。
• 根据实际需求调整 duration 和 delay 等参数。
• 如果你的页面使用了其他动画或滚动效果，可能需要调整 Intersection Observer 的 threshold 参数，以确保计数器在正确的时机启动。

总结

通过使用 Intersection Observer API，我们可以有效地解决 Counter Up 计数器在滚动时停止在随机数的问题。这种方法可以确保每次元素进入视口时，计数器都能正确地从初始值开始计数，从而提供更流畅的用户体验。