如何让window.scrollY关联的滚动事件仅触发一次？

架构老林

2026-7-2

解决滚动事件仅触发一次的问题

你的核心问题是没有在触发后标记事件已执行，导致每次滚动到scrollY > 30时都会重复触发请求。下面提供两种可靠的解决方法：

方法一：用布尔变量标记状态（修复你原有代码）

给布尔变量fired添加赋值逻辑，一旦触发就将其设为true，阻止后续重复执行：

var fired = false;
window.addEventListener("scroll", function() {
    // 同时满足滚动位置和未触发过的条件
    if (window.scrollY > 30 && !fired) {
        fired = true; // 标记为已触发，后续不再执行
        fetch("https://ip2c.org/self")
            .then(response => response.text())
            .then(text => {
                if (text.includes("IND")) {
                    document.getElementById("IN").style.display = "flex";
                }
            });
    }
});

方法二：满足条件后直接移除事件监听器

这种方法更高效，一旦触发逻辑就彻底移除滚动事件监听器，避免后续不必要的事件监听：

// 给回调函数命名，方便移除
function handleScroll() {
    if (window.scrollY > 30) {
        window.removeEventListener("scroll", handleScroll); // 移除监听器
        fetch("https://ip2c.org/self")
            .then(response => response.text())
            .then(text => {
                if (text.includes("IND")) {
                    document.getElementById("IN").style.display = "flex";
                }
            });
    }
}
window.addEventListener("scroll", handleScroll);