本文旨在解决在使用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 计数器在滚动时停止在随机数的问题。这种方法可以确保每次元素进入视口时，计数器都能正确地从初始值开始计数，从而提供更流畅的用户体验。
以上就是解决Counter Up JQuery计数器重复滚动时停止在随机数的问题的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/120184.html
微信扫一扫 
支付宝扫一扫 
