本文旨在解决在使用Counter Up JQuery插件时，当页面滚动导致计数器元素重新进入视口时，计数器停止在随机数而非重新计数的问题。通过使用Intersection Observer API，我们可以精确地控制计数器的启动时机，确保每次元素进入视口时都能正确地从零开始计数，从而避免计数器停止在随机数的情况。
问题分析
使用 Counter Up 插件时，一个常见的问题是当元素离开视口后再次进入时，计数器不会重新从初始值开始计数，而是停留在上次滚动离开视口时的数值。这通常是因为 Counter Up 默认的行为是一旦计数器启动，就不会再次启动。
解决方案：使用 Intersection Observer API
为了解决这个问题，我们可以使用 Intersection Observer API 来监听计数器元素是否进入视口。当元素进入视口时，我们启动计数器；当元素离开视口时，我们重置计数器的状态，以便下次进入视口时能够重新计数。
以下是具体的实现步骤：
- 引入 Counter Up 2 库:
首先，确保你已经引入了 Counter Up 2 库。
- HTML 结构:
你的 HTML 结构应该包含带有 counter 类的元素，这些元素将作为计数器的目标。
10
Years of
Experience
+
5000
Products
Sold
- 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 监听它们。
- CSS (可选):
如果需要，可以添加一些 CSS 样式来调整计数器的外观。
.row{height:1000px;} /* 为了演示滚动效果，设置 row 的高度 */注意事项
- 确保引入了 jQuery 库，因为 Counter Up 依赖于 jQuery。
- 根据实际需求调整 duration 和 delay 等参数。
- 如果你的页面使用了其他动画或滚动效果，可能需要调整 Intersection Observer 的 threshold 参数，以确保计数器在正确的时机启动。
总结
通过使用 Intersection Observer API，我们可以有效地解决 Counter Up 计数器在滚动时停止在随机数的问题。这种方法可以确保每次元素进入视口时，计数器都能正确地从初始值开始计数，从而提供更流畅的用户体验。
