纯CSS实现滚动触发时间线线条变色效果方案咨询

实现思路 #

利用CSS 滚动驱动动画（Scroll-Driven Animations），将动画绑定到容器的滚动进度，通过控制上层激活态线条的高度，模拟滚动时线条逐步从灰色变为紫色的效果。

代码实现 #

<div class="timeline-container">
  <div class="timeline-track"></div> <!-- 灰色底层线条 -->
  <div class="timeline-progress"></div> <!-- 紫色激活线条 -->
  <!-- 可自定义添加时间线内容节点 -->
  <div class="timeline-item">内容节点1</div>
  <div class="timeline-item">内容节点2</div>
  <div class="timeline-item">内容节点3</div>
  <div class="timeline-item">内容节点4</div>
  <div class="timeline-item">内容节点5</div>
</div>

.timeline-container {
  position: relative;
  max-width: 800px;
  margin: 0 auto;
  padding: 2rem 0;
  height: 100vh;
  overflow-y: auto;
}

/* 灰色底层线条 */
.timeline-track {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 2px;
  background-color: #e0e0e0;
  transform: translateX(-50%);
}

/* 紫色激活线条 */
.timeline-progress {
  position: absolute;
  left: 50%;
  top: 0;
  width: 2px;
  background-color: #9c27b0;
  transform: translateX(-50%);
  animation: grow linear;
  animation-timeline: scroll(root block);
  animation-range: contain 0% contain 100%;
}

@keyframes grow {
  from { height: 0; }
  to { height: 100%; }
}

/* 示例内容节点样式 */
.timeline-item {
  margin: 4rem auto;
  width: 80%;
  padding: 1.5rem;
  background: #f5f5f5;
  border-radius: 8px;
}

说明 #

• animation-timeline: scroll(root block) 将动画绑定到根元素的垂直滚动进度
• animation-range: contain 0% contain 100% 确保动画从容器进入视口开始，到完全离开视口结束
• 兼容性：Chrome、Edge、Safari 16.4+原生支持该特性，若需兼容旧浏览器，可采用下方JS方案

实现思路 #

监听时间线容器的滚动事件，计算滚动进度，动态设置激活线条的高度百分比。

代码实现 #

<div class="timeline-container">
  <div class="timeline-track"></div>
  <div class="timeline-progress" id="timelineProgress"></div>
  <div class="timeline-item">内容节点1</div>
  <div class="timeline-item">内容节点2</div>
  <div class="timeline-item">内容节点3</div>
  <div class="timeline-item">内容节点4</div>
  <div class="timeline-item">内容节点5</div>
</div>

.timeline-container {
  position: relative;
  max-width: 800px;
  margin: 0 auto;
  padding: 2rem 0;
  height: 100vh;
  overflow-y: auto;
}

.timeline-track {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 2px;
  background-color: #e0e0e0;
  transform: translateX(-50%);
}

.timeline-progress {
  position: absolute;
  left: 50%;
  top: 0;
  width: 2px;
  background-color: #9c27b0;
  transform: translateX(-50%);
  height: 0;
}

.timeline-item {
  margin: 4rem auto;
  width: 80%;
  padding: 1.5rem;
  background: #f5f5f5;
  border-radius: 8px;
}

const timelineContainer = document.querySelector('.timeline-container');
const timelineProgress = document.getElementById('timelineProgress');

function updateTimeline() {
  const scrollPercentage = (timelineContainer.scrollTop / (timelineContainer.scrollHeight - timelineContainer.clientHeight)) * 100;
  timelineProgress.style.height = `${scrollPercentage}%`;
}

timelineContainer.addEventListener('scroll', updateTimeline);
updateTimeline();

说明 #

• 仅监听时间线容器的滚动事件，避免全局滚动监听的性能损耗
• 通过计算滚动进度占比，实时更新激活线条高度，实现滚动变色效果

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