如何将div定位到视口右侧外部并实现响应式横向滚动动画？

需求说明 #

需要将包含文本的div定位到视口右侧外部，同时保留响应式特性，最终实现文本从右向左滚动的动画效果。

修改后的HTML代码 #

<div class="row mt-6 bg-contact align-items-center">
      <div class="col-lg-12 h-100 d-flex flex-wrap" id="scrollDiv">
        <h1 class="scroll-text">CONTACT US</h1>
      </div>
</div>

修改后的CSS代码（已引入Bootstrap） #

@import url("https://fonts.cdnfonts.com/css/aquire");

body {
  overflow-x: hidden !important;
}

.contact-section div.row h1.scroll-text {
  font-size: 20cqi;
  font-family: "Aquire", sans-serif;
  white-space: nowrap;
  margin: auto 0;
  -webkit-text-stroke: 3px white;
  -webkit-text-fill-color: transparent;
}

.bg-contact {
  container-type: line-size;
  background-image: url("../assets/img/contact.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: scroll;
  /* 响应式背景垂直偏移 */
  background-position-y: clamp(-5rem, -10vw, -11rem);
  overflow: hidden; /* 隐藏容器内溢出元素 */
}

#scrollDiv {
  position: relative;
  /* 初始定位到视口右侧外部 */
  left: 100vw;
  /* 横向滚动动画 */
  animation: scrollLeft 10s linear infinite;
}

/* 滚动动画关键帧 */
@keyframes scrollLeft {
  to {
    /* 滚动至文本完全离开视口左侧 */
    left: calc(-100% - 2rem);
  }
}

关键调整说明 #

• 初始定位：给#scrollDiv设置left: 100vw，利用视口宽度单位保证元素在任意屏幕尺寸下都处于视口右侧外部。
• 滚动逻辑：通过@keyframes定义从右向左的滚动轨迹，calc(-100% - 2rem)确保文本完全滚出视口后重新触发循环，linear参数保证动画速度均匀。
• 响应式适配：将背景图的固定垂直偏移改为clamp()函数，让偏移量随屏幕尺寸自适应；文本字号使用cqi单位，自动匹配容器尺寸。
• 溢出控制：给bg-contact添加overflow: hidden，配合body的横向溢出隐藏，避免页面出现横向滚动条。

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