JavaScript 中 window.onscroll 是单值属性，重复赋值会覆盖前一个函数；应改用 addEventListener('scroll', ...) 实现多函数共存，或统一入口集中调用所有滚动逻辑。
javascript 中 `window.onscroll` 是单值属性，重复赋值会覆盖前一个函数；应改用 `addeventlistener('scroll', ...)` 实现多函数共存，或统一入口集中调用所有滚动逻辑。
在实际开发中，我们常需为页面滚动行为添加多种响应逻辑——例如显示「返回顶部」按钮、渲染彩色进度条、触发动画或懒加载等。但若像示例中那样分别写 window.onscroll = function() {...}，后定义的会完全覆盖前者，导致仅有一个功能生效。
✅ 正确做法：使用 addEventListener
addEventListener 支持为同一事件注册多个监听器，且互不干扰，是现代 Web 开发的标准实践：
// 获取 DOM 元素
const myButton = document.getElementById("myBtn");
const progressbar = document.getElementById("progressbar");
const totalHeight = document.body.scrollHeight - window.innerHeight;
// 滚动监听器 1：控制返回顶部按钮显隐
function toggleScrollTopButton() {
const scrollTop = Math.max(document.body.scrollTop, document.documentElement.scrollTop);
myButton.classList.toggle("d-none", scrollTop {
toggleScrollTopButton();
updateProgressBar();
});
? 小技巧：使用
classList.toggle(className, condition)替代手动操作style.display，更符合 CSS-in-JS 最佳实践，也便于通过 CSS 控制过渡动画（如transition: opacity 0.3s）。
⚠️ 注意事项
-
避免重复绑定：若在动态模块或 SPA 路由中多次执行
addEventListener，需配合removeEventListener或使用{ once: true }选项防止内存泄漏； -
totalHeight需动态更新：页面内容异步加载（如图片、AJAX 渲染）可能导致scrollHeight变化，建议在DOMContentLoaded后初始化，并监听resize或load事件做兜底更新； -
兼容性处理：
window.pageYOffset已广泛支持（IE9+），无需再区分body.scrollTop/documentElement.scrollTop；但若需支持极旧浏览器，可封装为统一获取函数：function getScrollTop() { return window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop; }
✅ 补充：CSS 类建议（提升可维护性）
.d-none { display: none !important; }
#myBtn {
position: fixed;
bottom: 24px;
right: 24px;
z-index: 1000;
transition: opacity 0.2s, transform 0.2s;
}
#myBtn:not(.d-none) {
opacity: 1;
transform: translateY(0);
}
#myBtn.d-none {
opacity: 0;
transform: translateY(20px);
}
通过事件监听器聚合与职责分离的设计，你不仅能安全地叠加多个滚动行为，还能显著提升代码可读性、可测试性与可扩展性。记住：永远优先选择 addEventListener，而非直接覆写 onxxx 属性。
