如何阻止水平动画列表元素覆盖Waiting Tokens div并限制移动范围

问题分析 #

你的代码存在几个关键问题导致列表会越过"Waiting Tokens"区域：

• 父容器.list_wrapper未设置position: relative，导致绝对定位的列表以整个文档为基准定位，无法被header约束
• 动画关键帧的起始/结束位置设置错误，left:10缺少单位，且没有考虑header的宽度偏移
• 列表容器没有设置对应的裁剪区域，动画过程中内容会超出预期范围

修正方案 #

以下是调整后的完整代码：

CSS部分

/* 父容器设置相对定位，作为绝对定位子元素的基准 */
.list_wrapper {
  position: relative;
  overflow: hidden; /* 裁剪超出容器的列表内容 */
  height: 100px; /* 根据需求设置合适高度 */
}

.header {
  height: 140px;
  width: 200px;
  border: 1px solid black;
  z-index: 3;
  position: relative;
  background: #fff; /* 添加背景色覆盖下方滚动的列表 */
}

.list_wrapper__content {
  position: absolute;
  top: 25%;
  left: 200px; /* 与header宽度保持一致，从header右侧开始 */
  height: 5vh;
  background-color: #fff;
  animation: animate_opp_2 25s linear infinite;
  display: flex;
  white-space: nowrap; /* 确保列表项不换行 */
}

.list_wrapper__content___item {
  height: 5vh;
  border: 1px solid red;
  width: 200px;
  margin-right: 1%;
  text-align: center;
  border-radius: 8px;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2);
  color: grey;
  font-size: 30px;
  font-weight: bold;
  display: flex;
  align-items: center; /* 垂直居中文字 */
  justify-content: center;
}

@keyframes animate_opp_2 {
  0% {
    transform: translateX(0); /* 起始位置在header右侧 */
  }
  100% {
    transform: translateX(-100%); /* 列表完全移出左侧可视区域 */
  }
}

HTML部分

<div class="list_wrapper">
  <div class="header"> Waiting Tokens</div>
  <div class="list_wrapper__content">
    <div class="list_wrapper__content___item" *ngFor="let item of ListItems">
      {{item}}
    </div>
  </div>
</div>

关键调整说明 #

• 给.list_wrapper添加position: relative，让绝对定位的列表以它为基准；同时加overflow: hidden裁剪超出的内容
• .list_wrapper__content的left设为header的宽度（200px），确保从header右侧开始滚动
• 修正动画关键帧，移除无效的left设置，只用transform: translateX实现平滑滚动，起始位置为0，结束位置为-100%（整个列表宽度向左移出）
• 给header添加背景色，确保滚动的列表不会透过header显示出来
• 给列表项添加align-items: center让文字垂直居中，提升视觉效果

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