如何在页面左侧实现基础垂直滚动指示器？修改水平代码无效

我之前也碰到过这个问题——直接把水平滚动指示器的width改成height没效果，核心原因是我们不仅要修改属性，还要调整CSS布局逻辑和滚动比例的应用方式，毕竟垂直和水平指示器的渲染方向完全不同。下面是完整的可运行解决方案：

HTML 结构 #

<!-- 左侧垂直滚动指示器容器 -->
<div class="progress-container">
  <div class="progress-bar" id="myBar"></div>
</div>

<!-- 示例长内容，用于测试滚动效果 -->
<div style="height: 2000px; padding: 20px;">
  <p>向下滚动页面，查看左侧的垂直滚动指示器变化...</p>
</div>

CSS 样式（关键调整） #

/* 指示器容器：固定在左侧，占满整个视口高度 */
.progress-container {
  position: fixed;
  left: 0;
  top: 0;
  height: 100%;
  width: 8px; /* 指示器的宽度（厚度） */
  background: #f1f1f1;
}

/* 进度条：垂直方向增长，初始高度为0 */
.progress-bar {
  height: 0%;
  width: 100%;
  background: #4CAF50;
  transition: height 0.2s ease; /* 平滑过渡动画 */
}

JavaScript 逻辑（核心修改） #

// 获取进度条元素
const progressBar = document.getElementById("myBar");

window.onscroll = function() {
  calculateScrollProgress();
};

function calculateScrollProgress() {
  // 计算当前滚动的百分比：(已滚动高度 / 总可滚动高度) * 100
  const winScroll = document.body.scrollTop || document.documentElement.scrollTop;
  const totalScrollHeight = document.documentElement.scrollHeight - document.documentElement.clientHeight;
  const scrolledPercent = (winScroll / totalScrollHeight) * 100;
  
  // 将百分比应用到进度条的height属性（替代原水平版本的width）
  progressBar.style.height = scrolledPercent + "%";
}

关键修改点说明 #

• CSS布局调整：把指示器容器从水平顶部固定，改成左侧垂直固定，容器高度设为100%，宽度固定为指示器厚度；进度条设置宽度100%，通过高度变化来展示滚动进度。
• JS逻辑适配：滚动百分比的计算逻辑和水平版本一致，但我们把计算结果赋值给进度条的height属性，而非width，这样才能实现垂直方向的进度增长。
• 过渡效果保留：保留了原有的平滑过渡动画，让进度条的变化更自然。

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