如何在向上滚动时停止CSS view()/scroll()时间线动画？

针对你遇到的「向下滚动触发淡入动画，但向上滚动时动画反向执行」的问题，提供几种可行的解决方案：

方法1：纯CSS结合少量JS锁定进度 #

利用CSS变量记录滚动进度，通过max()函数确保进度只增不减，避免向上滚动时动画回退：

.do-fade {
  /* 获取根元素垂直滚动进度（范围0-1） */
  --scroll-progress: scroll(root block);
  /* 锁定进度：只保留比之前更大的值，阻止回退 */
  --fixed-progress: max(var(--scroll-progress), var(--prev-progress, 0));
  opacity: var(--fixed-progress);
  transition: opacity 350ms linear;
}

添加一小段JS来更新历史进度值（CSS无法自行保存状态）：

document.addEventListener('scroll', () => {
  const totalScroll = document.documentElement.scrollHeight - document.documentElement.clientHeight;
  const progress = totalScroll ? document.documentElement.scrollTop / totalScroll : 0;
  document.querySelectorAll('.do-fade').forEach(el => {
    el.style.setProperty('--prev-progress', progress);
  });
});

方法2：使用@scroll-timeline指定正向触发 #

通过定义滚动时间线并设置direction: forwards，让动画仅在向下滚动时激活：

/* 定义正向滚动时间线 */
@scroll-timeline fade-timeline {
  source: root;
  orientation: vertical;
  /* 对应你原代码的100px到300px触发范围 */
  scroll-offsets: 100px, 300px;
  direction: forwards;
}

.do-fade {
  animation: fade-in 350ms linear forwards;
  animation-timeline: fade-timeline;
}

@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

注意：@scroll-timeline属于实验性语法，部分浏览器可能需要前缀或存在兼容性限制，使用前请确认目标浏览器支持情况。

方法3：简化版进度阈值锁定 #

如果不需要精准的像素触发范围，直接用滚动进度百分比作为动画区间，结合animation-fill-mode: forwards锁定最终状态：

.do-fade {
  animation: fade-in 350ms linear forwards;
  animation-timeline: scroll(root block);
  /* 调整百分比对应你需要的触发区间 */
  animation-range: 20% 40%;
  animation-fill-mode: forwards;
}

@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

此方法中，当滚动进度超过40%后，动画会永久保持opacity:1，即使向上滚动回到区间内也不会反向执行。

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