如何合并多个window.onscroll函数？解决滚动进度条与返回顶部按钮冲突

问题根源 #

你遇到的核心问题是两次直接给window.onscroll赋值处理函数，后面的函数会完全覆盖前面的。第一次你把scrollFunction赋值给window.onscroll，第二次又赋值了一个匿名函数用来处理滚动进度条，导致只有最后绑定的逻辑生效，另一个功能自然失效。

两种解决方法 #

方法1：合并逻辑到同一个滚动处理函数

把两个功能的滚动事件逻辑放在同一个函数里，只给window.onscroll赋值一次，确保两个逻辑都能执行：

// 初始化元素
let mybutton = document.getElementById("myBtn");
let progress = document.getElementById('progressbar');
let totalHeight = document.body.scrollHeight - window.innerHeight;

// 合并滚动事件处理
window.onscroll = function() {
  // 返回顶部按钮逻辑
  if (document.body.scrollTop > 38 || document.documentElement.scrollTop > 512) {
    mybutton.style.display = "block";
  } else {
    mybutton.style.display = "none";
  }
  // 滚动进度条逻辑
  let progressHeight = (window.pageYOffset / totalHeight) * 100;
  progress.style.height = progressHeight + "%";
}

// 返回顶部功能
function topFunction() {
  document.body.scrollTop = 0; // 适配Safari
  document.documentElement.scrollTop = 0; // 适配Chrome、Firefox、IE、Opera
}

方法2：用addEventListener绑定多个滚动事件

这种方式更灵活，允许给同一个scroll事件绑定多个独立的处理函数，不会互相覆盖：

// 返回顶部按钮相关
let mybutton = document.getElementById("myBtn");

function scrollFunction() {
  if (document.body.scrollTop > 38 || document.documentElement.scrollTop > 512) {
    mybutton.style.display = "block";
  } else {
    mybutton.style.display = "none";
  }
}

function topFunction() {
  document.body.scrollTop = 0; // 适配Safari
  document.documentElement.scrollTop = 0; // 适配Chrome、Firefox、IE、Opera
}

// 滚动进度条相关
let progress = document.getElementById('progressbar');
let totalHeight = document.body.scrollHeight - window.innerHeight;

function updateProgressBar() {
  let progressHeight = (window.pageYOffset / totalHeight) * 100;
  progress.style.height = progressHeight + "%";
}

// 绑定两个滚动事件处理函数
window.addEventListener('scroll', scrollFunction);
window.addEventListener('scroll', updateProgressBar);

额外提示 #

如果页面内容是动态加载的（比如下拉加载新内容），需要在内容更新后重新计算totalHeight，否则滚动进度条的计算会不准确。

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