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

本文旨在解决在使用 Counter-Up 2 插件时，当页面上下滚动导致计数器元素重新进入视口时，计数器停止在随机数的问题。通过使用 Intersection Observer API 结合 Counter-Up 2 的方法，确保计数器每次进入视口都能从初始值计数到目标值，避免重复滚动导致的计数异常。

在使用 Counter-Up 插件实现数字滚动效果时，一个常见的问题是，当用户滚动页面，使得计数器元素离开视口后再重新进入视口时，计数器可能会停止在随机数，而不是从初始值重新开始计数。 这通常是因为 Counter-Up 默认的行为是在页面加载时执行一次计数动画，之后不再重新触发。

为了解决这个问题，我们可以使用 Intersection Observer API 来监听计数器元素是否进入视口。当元素进入视口时，我们才启动计数器。同时，我们需要记录元素是否已经计数过，防止重复计数。

以下是具体的实现步骤：

1. 引入 Counter-Up 2 插件

首先，确保你已经引入了 Counter-Up 2 插件。Counter-Up 2 提供了更灵活的配置和更好的性能。

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

2. HTML 结构

你的 HTML 结构应该包含带有 counter 类名的元素，这些元素将用于显示计数器。

怪兽AI数字人

数字人短视频创作，数字人直播，实时驱动数字人

44

查看详情

<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. 使用 Intersection Observer API 和 Counter-Up 2

以下 JavaScript 代码使用 Intersection Observer API 监听 counter 元素，并在元素进入视口时启动计数器。同时，使用 is-visible 类来标记元素是否已经计数过，以避免重复计数。

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: 从 window.counterUp.default 获取 Counter-Up 2 的默认导出函数。
• callback: Intersection Observer 的回调函数。它接收一个 entries 数组，每个 entry 代表一个被观察的元素的状态。
• entry.isIntersecting: 判断元素是否进入视口。
• !el.classList.contains('is-visible'): 判断元素是否已经计数过。
• counterUp(el, { duration: 500, delay: 10 }): 启动计数器，duration 设置动画持续时间，delay 设置每次计数之间的延迟。
• el.classList.add('is-visible'): 标记元素已经计数过。
• el.classList.remove('is-visible'): 当元素离开视口时，移除 is-visible 类，以便下次进入视口时可以重新计数。
• IntersectionObserver: 创建一个 Intersection Observer 实例，用于监听元素是否进入视口。threshold: 1 表示元素完全进入视口时触发回调函数。
• document.querySelectorAll('.counter'): 获取所有带有 counter 类名的元素。
• IO.observe(el): 开始观察每个元素。

4. CSS (可选)

以下 CSS 代码仅用于示例，可以根据你的实际需求进行修改。

.row{height:1000px;}

总结：

通过使用 Intersection Observer API 结合 Counter-Up 2 插件，我们可以有效地解决计数器在重复滚动时停止在随机数的问题。 这种方法确保计数器每次进入视口都能从初始值计数到目标值，提供更流畅和可靠的用户体验。记住，threshold 参数可以根据实际需求进行调整，以控制何时触发计数器。 此外，如果你的页面有大量的计数器元素，可以考虑优化 Intersection Observer 的配置，例如使用 rootMargin 来提前加载计数器，以提升性能。

以上就是解决 Counter-Up JQuery 计数器重复滚动时停止在随机数的问题的详细内容，更多请关注php中文网其它相关文章！