通过监听滚动事件并计算滚动百分比，结合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毫秒节流防抖类似，只不过是延迟执行，直到停止滚动一段时间后才执行。选择哪个取决于具体需求。
