如何在窗口滚动到指定section时仅更新一次counter（无依赖库）

核心思路 #

监听窗口滚动事件，通过元素位置判断目标Section是否进入视口，用标记变量严格控制计数器仅更新一次，全程无需第三方库。

HTML 结构 #

<div class="counter-display">计数：<span id="counter">0</span></div>

<!-- 填充内容让页面可滚动 -->
<div style="height: 800px; padding: 20px;">滚动到下方灰色区域查看效果</div>

<section id="target-section">
  <h3>目标区域</h3>
  滚动到此处时计数器仅更新一次
</section>

CSS 样式 #

body {
  margin: 0;
  padding: 0;
  min-height: 200vh; /* 让页面高度足够支持滚动 */
}

.counter-display {
  position: fixed;
  top: 20px;
  left: 20px;
  font-size: 24px;
  font-weight: bold;
}

#target-section {
  padding: 40px;
  background-color: #f0f0f0;
  border: 1px solid #ccc;
}

JavaScript 实现 #

// 获取目标元素和计数器元素
const targetSection = document.getElementById('target-section');
const counter = document.getElementById('counter');

// 标记计数器是否已更新，初始为false
let isCounterUpdated = false;

// 检测元素是否进入视口的工具函数
function isInViewport(element) {
  const rect = element.getBoundingClientRect();
  // 元素顶部不超过视口底部，且元素底部不小于视口顶部，即元素至少部分在视口内
  return rect.top <= window.innerHeight && rect.bottom >= 0;
}

// 滚动事件处理函数
function handleScroll() {
  // 若计数器已更新，直接终止函数
  if (isCounterUpdated) return;

  // 检查目标区域是否进入视口
  if (isInViewport(targetSection)) {
    // 执行计数器更新逻辑（这里示例为加1，可按需修改）
    counter.textContent = parseInt(counter.textContent) + 1;
    // 标记为已更新，避免重复执行
    isCounterUpdated = true;
    // 可选：更新完成后移除滚动监听，减少性能消耗
    window.removeEventListener('scroll', handleScroll);
  }
}

// 绑定滚动监听
window.addEventListener('scroll', handleScroll);

// 页面加载时先检查一次，防止目标区域初始就在视口内
handleScroll();

关键说明 #

• 标记变量控制：isCounterUpdated变量确保计数器仅更新一次，一旦触发就不再执行后续逻辑。
• 视口检测：通过getBoundingClientRect()获取元素的位置信息，判断是否进入视口，无需依赖第三方库。
• 性能优化：更新完成后可移除滚动监听，避免不必要的事件触发；初始加载时执行一次检测，覆盖页面加载时目标区域已在视口的场景。

内容的提问来源于stack exchange，提问作者Husanboy Zafarov