如何用JavaScript为所有type="timeline"的div添加进度条？求助

首先得指出你当前代码里的核心问题：HTML页面中的ID必须是唯一的！浏览器的getElementById方法只会返回页面中第一个匹配该ID的元素，这就是为什么你的进度条只加到了第一个div上——后面的div虽然ID相同，但根本没被JS选中处理。

接下来给你一步步的解决方案：

1. 修复重复ID的问题 #

把所有重复的ID替换成class，比如原来的id="your-id"改成class="scroll-container"，同时保留type属性用来区分timeline和slideshow类型：

<!-- 正确的结构示例 -->
<div class="scroll-container" type="timeline">
  <!-- 你的内容 -->
</div>
<div class="scroll-container" type="slideshow">
  <!-- 你的内容 -->
</div>
<div class="scroll-container" type="slideshow">
  <!-- 你的内容 -->
</div>

2. 修改JS代码，遍历所有Timeline容器 #

现在需要选择所有type="timeline"的容器，为每个容器单独创建进度条并绑定滚动事件：

// 获取所有type为timeline的滚动容器
const timelineContainers = document.querySelectorAll('div[type="timeline"]');

// 遍历每个容器，单独处理
timelineContainers.forEach(container => {
  // 1. 创建专属的进度条元素
  const progressBar = document.createElement('div');
  progressBar.classList.add('progress-bar');
  // 将进度条插入到当前容器的顶部（根据你的布局调整位置）
  container.prepend(progressBar);

  // 2. 绑定滚动事件，计算当前容器的滚动进度
  container.addEventListener('scroll', () => {
    const scrollTop = container.scrollTop;
    // 可滚动的总高度 = 容器内容总高度 - 容器可视高度
    const scrollableHeight = container.scrollHeight - container.clientHeight;
    // 计算进度百分比
    const progressPercentage = (scrollTop / scrollableHeight) * 100;
    // 更新进度条宽度
    progressBar.style.width = `${progressPercentage}%`;
  });
});

3. 添加对应的CSS样式 #

给滚动容器和进度条加上基础样式，确保进度条能正确显示：

.scroll-container {
  height: 400px; /* 必须设置固定高度才能触发滚动 */
  overflow-y: auto;
  position: relative; /* 让进度条可以相对容器定位 */
  padding-top: 4px; /* 避免内容被进度条遮挡，可选 */
}

.progress-bar {
  position: absolute;
  top: 0;
  left: 0;
  height: 4px;
  background-color: #4285F4;
  width: 0%;
  transition: width 0.1s ease; /* 平滑过渡效果 */
}

关键注意点 #

• 永远遵守HTML规范：ID在整个页面中必须唯一，重复ID会导致各种难以排查的DOM选择问题
• 每个timeline容器都需要自己的进度条元素，不能共用同一个——否则所有容器的滚动都会更新同一个进度条
• 如果不想用type属性区分，也可以给timeline容器额外加一个class，比如class="scroll-container timeline"，然后用document.querySelectorAll('.scroll-container.timeline')来选择

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