如何实现浏览器标签页失焦时标题的左右滚动效果？

嘿，刚好我之前折腾过类似的需求，给你一套直接能用的完整方案：

// 先把原始页面标题存起来，方便后续恢复
const originalTitle = document.title;
// 要滚动的提示文本，想加空格分隔符的话直接在这里改就行，比如'Dont forget us   '
const scrollText = 'Dont forget us';
// 用来存定时器ID，方便后续清除
let scrollTimer = null;

// 标题滚动的核心函数
function rollTitle() {
  // 把文本第一个字符移到末尾，实现滚动效果
  const updatedText = scrollText.substring(1) + scrollText.charAt(0);
  // 更新全局的滚动文本，保证下一次滚动是基于最新的内容
  scrollText = updatedText;
  // 设置新的页面标题
  document.title = updatedText;
}

// 监听标签页可见性变化的原生事件
document.addEventListener('visibilitychange', () => {
  if (document.hidden) {
    // 标签页切走了，启动滚动定时器（300毫秒滚一次，数值越小速度越快）
    scrollTimer = setInterval(rollTitle, 300);
  } else {
    // 切回标签页了，先把定时器清掉，避免后台浪费性能
    clearInterval(scrollTimer);
    // 恢复原来的页面标题
    document.title = originalTitle;
  }
});

几个关键细节说明： #

• visibilitychange 事件：这是浏览器原生支持的事件，不仅能监听标签页切换，连窗口最小化、切换到其他应用都能准确捕捉到，比监听blur/focus靠谱多了。
• 滚动逻辑：通过每次剪切文本首字符拼到末尾的方式实现循环滚动，逻辑简单还不占资源，想调整滚动节奏的话，直接改setInterval的第二个参数就行。
• 定时器管理：一定要在切回标签页时清除定时器，不然后台会一直跑着定时器，既浪费性能还可能导致后续逻辑混乱。

如果想要更丝滑的滚动效果，比如在文本前后加几个空格（比如' Dont forget us '），直接修改scrollText的初始值就好~

内容的提问来源于stack exchange，提问作者john