通过监听滚动事件并计算滚动百分比，结合CSS自定义进度条样式，可实现页面滚动进度指示器；为应对动态内容，使用MutationObserver重新计算进度；通过节流优化滚动事件性能。
滚动进度指示器，简单来说，就是页面滚动时，顶端或底部出现一条进度条，告诉你当前阅读到了哪个位置。实现起来并不复杂，JavaScript就能搞定。
先监听滚动事件，然后根据滚动距离和页面总高度计算出进度百分比，最后更新进度条的宽度或高度即可。
window.addEventListener('scroll', function() { const scrollTop = document.documentElement.scrollTop || document.body.scrollTop; const scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight; const clientHeight = document.documentElement.clientHeight || document.body.clientHeight; const scrollPercent = (scrollTop / (scrollHeight - clientHeight)) * 100; // 获取进度条元素，这里假设id是"progress-bar" const progressBar = document.getElementById('progress-bar'); // 更新进度条宽度 progressBar.style.width = scrollPercent + '%'; });
如何自定义滚动进度条的样式？
自定义样式是必须的，不然就太单调了。CSS才是灵魂。可以修改颜色、高度、位置等等。
#progress-bar { position: fixed; /* 固定在顶部或底部 */ top: 0; /* 顶部 */ left: 0; width: 0%; height: 5px; /* 高度 */ background-color: red; /* 颜色 */ z-index: 1000; /* 确保在最上层 */ }
还可以加点过渡效果，让进度条变化更平滑。比如：
立即学习“Java免费学习笔记（深入）”；
#progress-bar { transition: width 0.3s ease-in-out; }
如何处理内容高度动态变化的页面？
有些页面内容是动态加载的，高度会变，那之前的计算方法就不准了。需要在内容加载完成后重新计算。
比如，用MutationObserver监听内容变化：
const observer = new MutationObserver(function(mutations) { // 重新计算进度 updateProgressBar(); }); // 监听body的变化 observer.observe(document.body, { childList: true, subtree: true }); function updateProgressBar() { const scrollTop = document.documentElement.scrollTop || document.body.scrollTop; const scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight; const clientHeight = document.documentElement.clientHeight || document.body.clientHeight; const scrollPercent = (scrollTop / (scrollHeight - clientHeight)) * 100; const progressBar = document.getElementById('progress-bar'); progressBar.style.width = scrollPercent + '%'; }
如何避免滚动事件频繁触发导致的性能问题？
滚动事件触发频率很高，每次滚动都计算和更新DOM，性能消耗很大。需要节流或防抖。
用节流：
function throttle(func, delay) { let timeout; return function() { const context = this; const args = arguments; if (!timeout) { timeout = setTimeout(function() { func.apply(context, args); timeout = null; }, delay); } } } window.addEventListener('scroll', throttle(function() { // 滚动处理逻辑 const scrollTop = document.documentElement.scrollTop || document.body.scrollTop; const scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight; const clientHeight = document.documentElement.clientHeight || document.body.clientHeight; const scrollPercent = (scrollTop / (scrollHeight - clientHeight)) * 100; const progressBar = document.getElementById('progress-bar'); progressBar.style.width = scrollPercent + '%'; }, 100)); // 100毫秒节流
防抖类似，只不过是延迟执行，直到停止滚动一段时间后才执行。选择哪个取决于具体需求。
相关标签：