阅读进度条：让长文阅读更有掌控感

功能简介

阅读进度条会在文章页面顶部显示一条细长的进度指示条，随页面滚动实时反映当前阅读进度，让读者对篇幅长短一目了然。

如何开启

进入 WordPress 后台 → 「Vela主题设置」页面的「功能开关」分区 → 找到「阅读进度条」→ 勾选启用并保存。

效果与适用场景

• 固定在页面最顶端，不占用正文空间。
• 颜色与站点主题色一致，视觉统一。
• 长文、连载类内容尤其能提升阅读完成率。

备注

仅在单篇文章页生效；关闭开关即停止显示，无任何残留。

实现代码

以下为「阅读进度条」的核心实现（取自 features.js 与 features.css）。

/* ---------- 阅读进度条（features.js 片段） ---------- */
if (C.progressbar && isSingle()) {
    var bar = doc.createElement('div');
    bar.className = 'vela-progress';
    doc.body.appendChild(bar);
    var onScroll = function () {
        var el = doc.documentElement;
        var st = el.scrollTop || doc.body.scrollTop;
        var sh = (el.scrollHeight - el.clientHeight) || 1;
        bar.style.width = (st / sh * 100) + '%';
    };
    window.addEventListener('scroll', onScroll, { passive: true });
    onScroll();
}

/* 阅读进度条（features.css 片段） */
.vela-progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    width: 0;
    background: #2f6fed;
    z-index: 9999;
    transition: width .1s linear;
}

进度计算基于 scrollTop / (scrollHeight - clientHeight)，随滚动事件实时更新进度条宽度。