咨询：如何为案例研究页面实现左侧fixed填充式scroll bar（时间轴功能）

嘿，很高兴看到你开始搭建自己的作品集案例研究页面！这种侧边滚动进度条不仅能当时间轴引导用户，还能提升页面的交互质感，刚好我可以帮你实现类似的效果，咱们一步步来：

1. 基础HTML结构 #

先创建进度条的容器和填充元素，把它们放在页面最外层，确保不会被其他元素遮挡：

<!-- 侧边滚动进度条 -->
<div class="scroll-progress">
  <div class="progress-bar"></div>
</div>

<!-- 你的页面内容 -->
<main class="page-content">
  <!-- 这里放你的案例研究内容，比如多个章节、图片、文字等 -->
</main>

2. CSS样式设置 #

用position: fixed把进度条固定在左侧，设置好基础样式，让它看起来像侧边的时间轴：

/* 进度条容器：固定在左侧，高度占满视口 */
.scroll-progress {
  position: fixed;
  left: 20px; /* 距离左侧的距离，可根据你的页面调整 */
  top: 0;
  height: 100vh;
  width: 4px; /* 进度条的宽度 */
  background-color: #eee; /* 进度条的底色 */
  border-radius: 2px; /* 圆角让它更柔和 */
}

/* 填充的进度条：初始高度为0，红色背景，过渡动画 */
.progress-bar {
  height: 0;
  width: 100%;
  background-color: #ff3333; /* 参考你说的红色效果 */
  border-radius: 2px;
  transition: height 0.1s ease; /* 平滑过渡，避免卡顿 */
}

/* 给页面内容设置足够的高度，方便测试滚动效果 */
.page-content {
  min-height: 3000px; /* 模拟长页面内容 */
}

3. JavaScript实现滚动填充逻辑 #

监听页面的滚动事件，计算当前滚动的比例，然后动态更新进度条的高度：

// 获取进度条元素
const progressBar = document.querySelector('.progress-bar');

// 监听滚动事件
window.addEventListener('scroll', () => {
  // 计算滚动的总可滚动距离：文档总高度 - 视口高度
  const totalScrollable = document.documentElement.scrollHeight - window.innerHeight;
  // 计算当前滚动的比例
  const scrollRatio = window.scrollY / totalScrollable;
  // 将比例转化为百分比，设置给进度条的高度
  progressBar.style.height = `${scrollRatio * 100}%`;
});

一些小提示 #

• 你可以根据自己的页面设计调整进度条的宽度、颜色、位置（比如改成右侧），或者给容器加hover效果，让它更有交互感；
• 如果你的页面内容是动态加载的（比如异步加载案例内容），记得在内容加载完成后重新计算一次滚动比例，避免进度条显示异常；
• 可以给进度条添加一些额外的样式，比如在关键滚动节点（比如每个案例章节）添加标记点，让它更像时间轴。

这样就能实现你想要的“滚动时逐渐填充的固定侧边进度条”效果啦，赶紧试试吧！

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