使用原生 javascript 监听滚动事件，当视口首次到达目标元素位置时，精确触发一次计数器自增，并自动移除监听器以避免重复执行。
在网页交互开发中，常需实现“滚动至某区块时触发一次动画或统计”，例如数字计数器在用户视线进入统计区时开始递增。关键在于仅执行一次，而非持续响应滚动。以下为纯原生、无依赖的可靠实现方案：
✅ 核心思路
- 获取目标区块（如
）在页面中的垂直偏移量（offsetTop）； - 监听 window.scroll 事件，实时获取当前滚动高度（window.scrollY）；
- 一旦 scrollY >= sectionTop 条件首次成立，立即更新计数器并立刻解绑事件监听器，确保唯一性。
? 完整可运行代码示例
<!-- HTML -->
<section id="counter-section" class="oops">
<h2>统计区域</h2>
<p>当前触发次数：<span id="counter-display">0</span></p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/xiazai/skill11815" title="CDP浏览器大师"><img
src="https://img.php.cn/upload/skill/001/246/273/6adaf20dbae7c507.jpg" alt="CDP浏览器大师" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/xiazai/skill11815" title="CDP浏览器大师">CDP浏览器大师</a>
<p>CDP浏览器大师：通过Chrome DevTools Protocol驱动已登录浏览器实现自动化任务，解决反爬封号、选择器失效、SPA路由难导航、固定sleep不准四大痛点。核心能力包括UA伪装、WebGL/Canvas指纹混淆、智能等待、动态选择器以及可视化调试。</p>
</div>
<a href="/xiazai/skill11815" title="CDP浏览器大师" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div>
</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 替代。
该方案简洁、可靠、零依赖，是原生滚动触发型单次操作的经典实践。
