两个JavaScript滚动控制函数无法协同工作的问题求助及解决

作为JavaScript新手遇到这种情况太正常啦，我来帮你拆解问题原因和解决办法~

我的问题场景 #

我写了两个JS函数，分别用来控制「回到顶部按钮」和「导航栏」的显示状态，但运行后发现两个函数不能同时生效，只有最后一个函数会工作。

原代码如下：

window.onscroll = function() {scrollFunction()};
function scrollFunction() {
  if (document.body.scrollTop > 400 || document.documentElement.scrollTop > 400) {
    document.getElementById("goup").style.bottom = "0";
  } else {
    document.getElementById("goup").style.bottom = "-100px";
  }
};
window.onscroll = function() {goupFunction();};
function goupFunction() {
  if (document.body.scrollTop > 300 || document.documentElement.scrollTop > 300) {
    document.getElementById("navbar").style.top = "0";
  } else {
    document.getElementById("navbar").style.top = "-50px";
  }
};

问题根源 #

你两次给window.onscroll赋值了新的函数，在JavaScript里，这种直接赋值的方式会覆盖之前的绑定——也就是说第二次赋值后，第一次绑定的scrollFunction就被丢弃了，滚动时只会执行goupFunction，自然两个功能不能同时工作。

有效解决方案 #

有两种常用的解决思路：

思路1：合并函数逻辑（最简洁） #

把两个函数的逻辑整合到同一个滚动事件处理函数里，这样滚动时两个控制逻辑都会被执行：

window.onscroll = function() {
  // 控制回到顶部按钮
  if (document.body.scrollTop > 400 || document.documentElement.scrollTop > 400) {
    document.getElementById("goup").style.bottom = "0";
  } else {
    document.getElementById("goup").style.bottom = "-100px";
  }
  // 控制导航栏
  if (document.body.scrollTop > 300 || document.documentElement.scrollTop > 300) {
    document.getElementById("navbar").style.top = "0";
  } else {
    document.getElementById("navbar").style.top = "-50px";
  }
};

思路2：使用addEventListener绑定多个事件 #

如果想保留两个独立的函数，可以用addEventListener来绑定多个滚动事件，这种方式不会覆盖之前的绑定，多个函数都会在滚动时触发：

function scrollFunction() {
  if (document.body.scrollTop > 400 || document.documentElement.scrollTop > 400) {
    document.getElementById("goup").style.bottom = "0";
  } else {
    document.getElementById("goup").style.bottom = "-100px";
  }
};

function goupFunction() {
  if (document.body.scrollTop > 300 || document.documentElement.scrollTop > 300) {
    document.getElementById("navbar").style.top = "0";
  } else {
    document.getElementById("navbar").style.top = "-50px";
  }
};

// 用addEventListener绑定多个滚动事件
window.addEventListener('scroll', scrollFunction);
window.addEventListener('scroll', goupFunction);

我最终是在@Pedram的帮助下，用第一种合并函数的方式解决了问题~

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