JavaScript跨浏览器问题修复：垂直滚动至50%时代码仅执行一次

你的代码每次滚动到50%以上都会触发，是因为没有设置执行状态的限制，每次滚动事件触发都会进入判断。下面提供两种可行的修复方案：

方案一：用标记变量控制执行次数 #

通过一个外部变量记录逻辑是否已经执行过，只有当满足滚动条件且未执行过时，才触发目标逻辑，并更新标记状态：

let hasExecuted = false;

document.addEventListener("scroll", function() {
  // 计算当前滚动占页面总高度的比例
  const scrollRatio = window.scrollY / (document.documentElement.scrollHeight - document.documentElement.clientHeight);

  if (scrollRatio > 0.5 && !hasExecuted) {
    console.log('End 50');
    // 标记为已执行，后续滚动不再触发
    hasExecuted = true;
  }
});

方案二：执行后移除滚动监听 #

当满足条件执行完逻辑后，直接移除滚动事件的监听函数，彻底终止后续触发：

function handleScroll() {
  const scrollRatio = window.scrollY / (document.documentElement.scrollHeight - document.documentElement.clientHeight);

  if (scrollRatio > 0.5) {
    console.log('End 50');
    // 移除当前滚动监听，避免重复触发
    document.removeEventListener("scroll", handleScroll);
  }
}

document.addEventListener("scroll", handleScroll);

为什么return和break没用？ #

• return只是退出当前一次的回调函数，但滚动事件还在监听，下次滚动依然会触发回调；
• break仅适用于循环或switch语句，在if判断里使用不会起到终止后续触发的作用。

内容的提问来源于stack exchange，提问作者Mini Coder