滚动文字逐行高亮的核心逻辑是用递归setTimeout管理当前索引并切换li的active类，配合opacity过渡和绝对定位居中实现平滑高亮，避免setInterval堆积与布局跳动。
滚动文字逐行高亮的核心逻辑是什么
本质是控制 ul 或 ol 中每一项（li）的显示状态，配合 setInterval 定时切换当前高亮项的 class。不能靠 CSS 动画自动滚动，必须用 JS 管理“当前索引”，再通过增删 class 控制样式。常见错误是直接操作 display: none 导致布局跳动，或用 visibility: hidden 忘记保留占位，影响滚动节奏。
如何用定时器精准控制每行高亮时机
关键在避免 setInterval 堆积和索引越界。推荐用递归 setTimeout 替代循环 setInterval，更可控：
let currentIndex = 0;
const items = document.querySelectorAll('li');
function highlightNext() {
items.forEach((item, i) => {
item.classList.toggle('active', i === currentIndex);
});
currentIndex = (currentIndex + 1) % items.length;
setTimeout(highlightNext, 2000); // 每2秒切一行
}
highlightNext();
- 用
toggle('active', condition)替代手动add/remove，简洁且防重复 - 模运算
% items.length确保循环不崩 - 不用
setInterval是因为异步执行可能叠加，尤其在页面失焦后恢复时容易触发多次
高亮 class 的 CSS 写法要注意什么
显隐不能只靠 opacity 或 visibility，否则文字会重叠或留白异常。推荐组合使用：
.text-list li {
opacity: 0.4;
transition: opacity 0.3s ease;
}
.text-list li.active {
opacity: 1;
font-weight: bold;
}
- 所有
li默认半透明，.active提升为完全不透明 + 加粗，视觉对比强 - 必须加
transition，否则 class 切换瞬间闪烁 - 避免用
display: none—— 它会让 DOM 高度塌缩，滚动容器无法保持稳定高度 - 如果需隐藏非高亮项但保留位置，可用
color: transparent+text-shadow补救可读性（仅限纯文本场景）
滚动容器是否需要额外处理
若想让高亮区域始终居中或顶部对齐，不要依赖 JS 滚动容器，而应由 CSS 控制布局。例如：
立即学习“前端免费学习笔记（深入）”；
.scroll-container {
height: 120px;
overflow-y: hidden;
position: relative;
}
.text-list {
margin: 0;
padding: 0;
list-style: none;
position: absolute;
top: 50%;
transform: translateY(-50%);
}
-
overflow-y: hidden配合绝对定位 +transform居中，比 JSscrollTop更平滑、无卡顿 - 如果内容行高不一致，
transform: translateY(-50%)可能不准，此时改用top: 0+margin-top动态计算更稳 - 移动端需加
-webkit-overflow-scrolling: touch保证惯性滚动不中断
setTimeout 不会自动暂停，但视觉上可能跳过几行。如需严格同步，得监听 visibilitychange 事件暂存/恢复计时器。 
