使用原生 javascript 监听滚动事件，当视口首次到达目标元素位置时，精确触发一次计数器自增，并自动移除监听器以避免重复执行。
在网页交互开发中，常需实现“滚动至某区块时触发一次动画或统计”，例如数字计数器在用户视线进入统计区时开始递增。关键在于仅执行一次，而非持续响应滚动。以下为纯原生、无依赖的可靠实现方案：
✅ 核心思路
- 获取目标区块（如 <section id="counter-section">）在页面中的垂直偏移量（offsetTop）；
- 监听 window.scroll 事件，实时获取当前滚动高度（window.scrollY）；
- 一旦 scrollY >= sectionTop 条件首次成立，立即更新计数器并立刻解绑事件监听器，确保唯一性。
? 完整可运行代码示例
<!-- HTML --> <section id="counter-section" class="oops"> <h2>统计区域</h2> <p>当前触发次数：<span id="counter-display">0</span></p> </section>
/* 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 替代。
该方案简洁、可靠、零依赖，是原生滚动触发型单次操作的经典实践。
