scroll滚动函数报Maximum call stack size exceeded错误解决方法

你报Maximum call stack size exceeded错的直接原因是无终止的递归自调用：
你在whenScroll函数的判断条件里写了whenScroll() > 45，代码执行到这行时会立刻重新调用whenScroll函数本身，新启动的函数执行到同一行又会再次调用自己，全程没有任何终止递归的逻辑，调用栈很快就被占满抛出错误。

除此之外你的代码还有两个逻辑缺失：

• 判断条件完全写错：你本来要对比的是页面滚动距离和45的大小，不是函数自己调用自己的返回值
• 没有绑定滚动事件监听：就算函数逻辑写对，没有绑定到页面滚动事件的话，滚动页面时函数根本不会执行

按以下逻辑调整即可实现预期效果：

1. 判断条件替换为获取页面真实的垂直滚动距离，现代浏览器可直接用window.scrollY，兼容旧浏览器可以补document.documentElement.scrollTop做兜底
2. 把写好的处理函数绑定到window的scroll事件上，页面滚动时会自动触发逻辑
3. 可以补充回退逻辑：滚动距离回到45px以内时，把背景色恢复为初始值，避免滚回顶部背景色不还原

完整可运行代码如下：

function whenScroll() {
  // 获取当前页面垂直滚动的距离
  const scrollDistance = window.scrollY || document.documentElement.scrollTop;
  const bodyEle = document.body;
  if (scrollDistance > 45) {
    bodyEle.style.backgroundColor = "#0f0f0f";
  } else {
    // 这里替换成你页面初始的背景色即可
    bodyEle.style.backgroundColor = "#fff";
  }
}
// 绑定滚动监听
window.addEventListener('scroll', whenScroll);

小提示：如果后续觉得滚动时函数触发太频繁造成卡顿，可以给whenScroll加节流函数优化性能，初学阶段先把基础逻辑跑通即可。

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