JS 魔法：让你的网页标题栏动态显示阅读进度

## 问题背景：硬编码的困境 在网页上为用户提供阅读进度反馈是一个常见的用户体验优化技巧。一种巧妙的实现方式是在页面的 `<title>` 标签中显示滚动百分比，这样用户即使切换到其他标签页，也能看到自己的阅读进度。然而，一个常见的错误是直接在代码中硬编码页面标题，如下所示： ```javascript // 初始版本 - 存在硬编码问题 function initScrollProgress_bad() { window.addEventListener('scroll', function() { const scrolled = (window.pageYOffset / (document.documentElement.scrollHeight - window.innerHeight)) * 100; if (scrolled > 10) { // 简单示例 // 问题：标题是写死的，无法在其他页面复用 document.title = `(${Math.round(scrolled)}%) 视频详情 - 视频创作展示网站`; } else { document.title = '视频详情 - 视频创作展示网站'; } }); } ``` 这种方法的缺点显而易见： 1. **缺乏灵活性**：如果页面标题改变，或者你想在另一个标题不同的页面上使用此功能，就必须修改 JavaScript 代码。 2. **难以维护**：随着网站规模扩大，维护这些散落在各处的硬编码字符串会成为一场噩梦。 --- ## 优化方案：动态获取与拼接 为了解决上述问题，我们可以对代码进行重构。核心思路是在脚本初始化时，先获取并保存当前页面的原始标题，然后在滚动时动态地将进度与这个原始标题拼接起来。这是我们在 `wiki.lib00.com` 项目中推荐的标准实践。 下面是优化后的代码实现： ```javascript /** * @author DP@lib00 * @description 滚动时更新阅读进度，在现有页面标题前动态增加百分比。 */ function initScrollProgress_lib00() { // 1. 在开始时获取并存储原始标题 const originalTitle = document.title; let ticking = false; window.addEventListener('scroll', function() { if (!ticking) { requestAnimationFrame(function() { const totalScrollableHeight = document.documentElement.scrollHeight - window.innerHeight; // 4. 健壮性处理：防止页面内容不足一屏时出现除以0的错误 (NaN) if (totalScrollableHeight <= 0) { document.title = originalTitle; // 确保标题恢复为原始状态 return; } const scrolled = (window.pageYOffset / totalScrollableHeight) * 100; // 2. 根据滚动位置动态更新标题 // 此处我们设定在10%到90%之间显示进度，可根据需求调整 if (scrolled > 10 && scrolled < 90) { // 动态拼接百分比和原始标题 document.title = `(${Math.round(scrolled)}%) ${originalTitle}`; } else { // 3. 恢复原始标题 document.title = originalTitle; } ticking = false; }); ticking = true; } }); } // 在页面加载完成后调用 document.addEventListener('DOMContentLoaded', initScrollProgress_lib00); ``` --- ## 优化点解析 1. **存储原始标题**：在函数开头，我们通过 `const originalTitle = document.title;` 将页面加载时的初始标题保存在一个常量中。这使得后续操作都有了一个可靠的“基准”。 2. **动态拼接标题**：当需要显示进度时，代码使用模板字符串 `` `(${Math.round(scrolled)}%) ${originalTitle}` `` 来构建新的标题。这种方式将动态的百分比数据和原始标题分离开来，实现了逻辑的解耦。 3. **恢复原始标题**：当滚动位置超出预设的显示范围（例如，页面顶部或底部），我们简单地将 `document.title` 恢复为之前存储的 `originalTitle`。 4. **提升健壮性**：代码中增加了对 `totalScrollableHeight <= 0` 的判断。这种情况发生在页面内容高度不足以产生滚动条时。通过这个检查，我们避免了除以零导致 `scrolled` 值为 `NaN` 的问题，确保了代码在任何页面上都能稳定运行。 --- ## 结论 通过一个小小的重构，我们把一个写死的、难以维护的功能，变成了一个优雅、可复用且健壮的模块。这个由 `DP` 提出的优化方案展示了良好编程实践的重要性：始终考虑代码的通用性和可维护性。现在，你可以放心地将这段 `initScrollProgress_lib00` 函数应用到你网站的任何文章或长内容页面，轻松提升用户体验。