如何实现从屏幕内启动的无限滚动文本并去除横向滚动条？

关键修改说明 #

• 全局隐藏横向滚动条：通过body和容器的overflow-x: hidden属性，避免文本滚动时出现页面横向滚动条。
• 调整起始位置：把文本初始状态设置在屏幕可视区域内，替换原代码中translateX(-100%)的屏幕外起始设置。
• 优化动画衔接：调整动画关键帧和延迟时间，确保滚动过程无缝循环，同时保持首次启动时文本在屏幕内。

修改后的完整代码 #

HTML

<div class="wrapper">
  <div class="text1">Lorem ipsum dolor sit amet. </div>
  <div class="text2">Lorem ipsum dolor sit amet.</div>
</div>

CSS

* {
  margin: 0;
  padding: 0;
}

body {
  overflow-x: hidden; /* 隐藏页面全局横向滚动条 */
}

.wrapper {
  position: relative;
  overflow: hidden; /* 隐藏容器内溢出的内容 */
  width: 100vw;
}

.text1, .text2 {
  font-size: 80px;
  white-space: nowrap;
  position: absolute;
  left: 0; /* 初始定位在屏幕左侧（可视区域内） */
}

@keyframes move {
  from {
    transform: translateX(0); /* 动画起始位置：屏幕内 */
  }
  to {
    transform: translateX(calc(100vw + 10px)); /* 滚动到屏幕右侧外，加10px是文本间距 */
  }
}

.text1 {
  animation: move 5s linear infinite;
}

.text2 {
  animation: move 5s linear 2.5s infinite; /* 延迟一半时长启动，衔接第一个文本的滚动 */
}

代码解释 #

1. 滚动条消除：body设置overflow-x: hidden防止页面出现横向滚动条，wrapper设置overflow: hidden确保内部滚动的文本不会溢出显示。
2. 起始位置调整：文本初始left: 0，动画起始帧translateX(0)，页面加载时文本直接显示在屏幕内，不会从外部滑入。
3. 无缝循环：两个相同文本设置相同的动画，第二个文本延迟一半动画时长启动，当第一个文本完全滚出屏幕右侧时，第二个文本刚好从屏幕左侧进入，形成无限滚动的视觉效果。

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