17370845950

使用原生 javascript 监听滚动事件，当视口首次到达目标元素位置时，精确触发一次计数器自增，并自动移除监听器以避免重复执行。

在网页交互开发中，常需实现“滚动至某区块时触发一次动画或统计”，例如数字计数器在用户视线进入统计区时开始递增。关键在于仅执行一次，而非持续响应滚动。以下为纯原生、无依赖的可靠实现方案：

✅ 核心思路

1. 获取目标区块（如
   ）在页面中的垂直偏移量（offsetTop）；
2. 监听 window.scroll 事件，实时获取当前滚动高度（window.scrollY）；
3. 一旦 scrollY >= sectionTop 条件首次成立，立即更新计数器并立刻解绑事件监听器，确保唯一性。

? 完整可运行代码示例

  
统计区域
  
当前触发次数：0

/* CSS（增强可测性） */
.oops {
  border: solid red 1px;
  padding: 40px 20px;
  margin: 80vh 0; /* 确保需滚动才能到达 */
  background: #f9f9f9;
}

// JavaScript（推荐写法，兼容现代浏览器）
let counter = 0;
const counterDisplay = document.getElementById('counter-display');
const section = document.querySelector('#counter-section');

if (section) {
  const sectionTop = section.offsetTop;

  const handleScroll = () => {
    if (window.scrollY >= sectionTop) {
      counter++;
      counterDisplay.textContent = counter;
      // ✅ 关键：移除监听器，保证只执行一次
      window.removeEventListener('scroll', handleScroll);
    }
  };

  window.addEventListener('scroll', handleScroll);
}

⚠️ 注意事项

• arguments.callee 已废弃：原答案中使用 arguments.callee 移除监听器在严格模式下会报错，应改用命名函数（如上 handleScroll）或箭头函数配合 removeEventListener 的显式引用；
• 元素存在性校验：务必检查 section 是否获取成功，避免 null.offsetTop 报错；
• 性能考量：虽已解绑，但若需支持“重新进入重置”等复杂逻辑，建议改用 IntersectionObserver（更高效、语义清晰），但本例严格遵循“无库”要求；
• 兼容性：window.scrollY 在 IE9+ 支持良好；若需兼容更老版本，可用 document.documentElement.scrollTop || document.body.scrollTop 替代。

该方案简洁、可靠、零依赖，是原生滚动触发型单次操作的经典实践。