能用js实现
以下是使用 JavaScript 实现的方法：
监听滚动事件
通过 window.addEventListener 监听 scroll 事件，实时获取页面滚动位置。
window.addEventListener('scroll', function() {
console.log(window.scrollY);
});计算滚动百分比
根据文档总高度和可视窗口高度，计算当前滚动位置的百分比。
function getScrollPercentage() {
const scrollTop = window.scrollY;
const windowHeight = window.innerHeight;
const docHeight = document.documentElement.scrollHeight;
return (scrollTop / (docHeight - windowHeight)) * 100;
}动态更新进度条
创建一个固定在页面顶部或底部的进度条元素，并随滚动百分比更新其宽度。
const progressBar = document.createElement('div');
progressBar.style.position = 'fixed';
progressBar.style.top = '0';
progressBar.style.left = '0';
progressBar.style.height = '5px';
progressBar.style.backgroundColor = 'blue';
document.body.appendChild(progressBar);
window.addEventListener('scroll', function() {
const percent = getScrollPercentage();
progressBar.style.width = percent + '%';
});优化性能
使用 requestAnimationFrame 或节流函数避免频繁触发滚动事件导致的性能问题。
let ticking = false;
window.addEventListener('scroll', function() {
if (!ticking) {
window.requestAnimationFrame(function() {
const percent = getScrollPercentage();
progressBar.style.width = percent + '%';
ticking = false;
});
ticking = true;
}
});兼容性处理
确保代码在旧浏览器中正常运行，可通过 document.body.scrollTop 作为回退方案。
const scrollTop = window.scrollY || document.documentElement.scrollTop || document.body.scrollTop;自定义样式
通过 CSS 进一步美化进度条，例如添加过渡动画或圆角效果。
div[style*="position: fixed"] {
transition: width 0.1s ease;
border-radius: 0 5px 5px 0;
}
