如何实现随浏览器滚动百分比变化的文本填充动画？

核心思路 #

用两层相同文本叠加（底层显示默认色，上层显示填充色），结合滚动监听计算元素在视口中的可见进度，动态裁剪上层文本的显示宽度，就能实现随滚动从左到右填充、反向滚动时撤销填充的效果。

步骤1：HTML结构 #

需要一个容器包裹两层文本，保证内容完全一致：

<div class="fill-text-container">
  <span class="fill-text-bottom">滚动填充的示例文本</span>
  <span class="fill-text-top">滚动填充的示例文本</span>
</div>

步骤2：CSS样式 #

设置容器定位让两层文本重叠，上层文本默认隐藏，靠clip-path控制显示范围：

.fill-text-container {
  position: relative;
  font-size: 48px;
  font-weight: bold;
  width: fit-content;
  margin: 200vh 0; /* 加足够上下间距，方便测试滚动 */
}

.fill-text-bottom {
  color: #ccc; /* 底层文本用灰色当底色 */
}

.fill-text-top {
  position: absolute;
  top: 0;
  left: 0;
  color: #2563eb; /* 填充用的蓝色 */
  clip-path: inset(0 100% 0 0); /* 默认完全隐藏 */
  transition: clip-path 0.1s ease; /* 可选：加过渡让动画更丝滑 */
}

步骤3：JavaScript逻辑 #

监听滚动事件，计算元素的可见进度，动态更新上层文本的裁剪区域：

// 获取目标元素和上层文本
const container = document.querySelector('.fill-text-container');
const fillTextTop = document.querySelector('.fill-text-top');

function handleScroll() {
  // 获取元素相对于视口的位置信息
  const rect = container.getBoundingClientRect();
  // 视口高度
  const viewportHeight = window.innerHeight;
  
  // 计算滚动进度：元素从进入视口到完全离开的过程中，进度从0到100
  const progress = Math.max(0, Math.min(100, ((viewportHeight - rect.top) / (viewportHeight + rect.height)) * 100));
  
  // 更新裁剪区域：右侧保留(100 - progress)%的显示范围，实现从左到右填充
  fillTextTop.style.clipPath = `inset(0 ${100 - progress}% 0 0)`;
}

// 添加滚动监听
window.addEventListener('scroll', handleScroll);
// 页面加载时执行一次，避免初始状态异常
handleScroll();

关键细节说明 #

• getBoundingClientRect()：用来获取元素在视口中的位置，是计算滚动进度的核心。
• clip-path: inset()：通过调整右侧的裁剪百分比，控制上层文本的显示宽度，实现填充效果。
• 进度计算：确保元素在视口内时进度线性变化，完全离开视口后进度固定在0或100。
• 性能优化：如果滚动时动画卡顿，可以用requestAnimationFrame包裹逻辑，提升流畅度：

function handleScroll() {
  requestAnimationFrame(() => {
    // 原逻辑代码
  });
}

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