修复纯CSS滚动文本视差效果中的内容叠加问题

你现在的问题是：已经实现了从上到下的滚动视差，但停在第一个文本区块时，另外两个区块会叠加显示在它上面。下面是纯CSS的解决方案，能实现类似示例的视差切换效果，同时解决叠加问题：

核心思路 #

通过固定视口容器+滚动驱动动画，把每个文本区块限定在视口内，滚动时只让当前区块显示，其他区块被移出视口或置于下层，避免叠加。

1. 布局结构调整 #

先把页面分成两个部分：

• 固定高度的视口容器：只展示当前可见的区块，超出部分隐藏
• 可滚动的内容容器：高度等于所有区块高度之和，作为滚动触发的载体

/* 视口容器：占满屏幕高度，隐藏超出内容 */
.viewport {
  height: 100vh;
  overflow: hidden;
  position: relative;
}

/* 滚动容器：高度是3个区块的总和（每个区块100vh） */
.scroll-container {
  height: 300vh;
  position: relative;
}

2. 区块定位与初始状态设置 #

每个文本区块绝对定位，占满视口高度，初始状态下只有第一个区块在视口内，其他区块被推到视口下方，层级依次降低：

.section {
  position: absolute;
  width: 100%;
  height: 100vh;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  transition: transform 0.4s ease;
}

/* 初始状态：第一个区块在视口，层级最高 */
.section:nth-child(1) {
  z-index: 3;
  transform: translateY(0);
}

/* 第二个区块初始在视口下方 */
.section:nth-child(2) {
  z-index: 2;
  transform: translateY(100%);
}

/* 第三个区块初始在更下方 */
.section:nth-child(3) {
  z-index: 1;
  transform: translateY(200%);
}

3. 滚动驱动视差动画 #

利用CSS滚动驱动动画（scroll-timeline），根据滚动进度控制区块的位置，实现滚动时的视差切换：

/* 创建滚动时间线，绑定到滚动容器 */
@scroll-timeline section-scroll {
  source: selector(.scroll-container);
  orientation: vertical;
  scroll-offsets: 0%, 100%;
}

/* 定义区块上滑的动画 */
@keyframes slide-up {
  to {
    transform: translateY(-100%);
  }
}

/* 给每个区块设置动画触发范围 */
.section:nth-child(1) {
  animation: slide-up linear both;
  animation-timeline: section-scroll;
  animation-range: 0% 33.33%; /* 滚动前1/3时，第一个区块滑出 */
}

.section:nth-child(2) {
  animation: slide-up linear both;
  animation-timeline: section-scroll;
  animation-range: 33.33% 66.66%; /* 中间1/3滚动时，第二个区块滑出 */
}

效果说明 #

调整后，初始状态只有第一个区块在视口内，其他区块都在视口下方不可见。滚动页面时，随着滚动进度，每个区块会依次向上滑入视口，同时前一个区块滑出，不会出现叠加问题，完全用纯CSS实现了类似示例的滚动视差效果。

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