使用CSS animation的translate实现横向滚动时sticky定位失效问题

问题核心在于：当元素应用transform时，会创建新的包含块，sticky定位的元素会以这个transform元素为参照，而非原本的滚动容器，直接导致sticky失效。要解决这个问题，我们可以调整动画的作用对象，让transform不干扰sticky元素的定位参照。

实现代码 #

CSS 代码 #

.container {
  display: flex;
  overflow: hidden;
}

.scroller {
  display: flex;
  position: relative;
  /* 移除scroller上的动画，将动画转移到内部容器 */
}

/* 新增内部容器承载滚动动画 */
.scroller-inner {
  display: flex;
  animation: autoScroll 10s linear infinite;
}
 
.card {
  padding: 10px;
  margin: 0 10px;
  width: 70px;
  background: lightblue;
}
  
.sticky-el {
  width: 100px;
  background: cyan;
  position: sticky;
  left: 0;
  z-index: 1; /* 确保sticky元素不被滚动卡片遮挡 */
}

@keyframes autoScroll {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-100%);
  }
}

HTML 代码 #

<div class="container">
  <div class="scroller">
    <div class="sticky-el card">Sticky 1</div>
    <div class="scroller-inner">
      <div class="card">Card 1</div>
      <div class="card">Card 2</div>
      <div class="card">Card 3</div>
      <!-- 复制内容保证滚动无限连贯 -->
      <div class="card">Card 1</div>
      <div class="card">Card 2</div>
      <div class="card">Card 3</div>
    </div>
  </div>
  
  <div class="scroller">
    <div class="sticky-el card">Sticky 2</div>
    <div class="scroller-inner">
      <div class="card">Card 21</div>
      <div class="card">Card 22</div>
      <div class="card">Card 23</div>
      <!-- 复制内容保证滚动无限连贯 -->
      <div class="card">Card 21</div>
      <div class="card">Card 22</div>
      <div class="card">Card 23</div>
    </div>
  </div>
</div>

原理说明 #

• 将动画从.scroller转移到内部的.scroller-inner，避免.scroller因transform创建新包含块，让sticky-el仍以.container作为滚动参照容器，保证sticky定位正常生效。
• 复制滚动内容是为了消除动画结束时的空白跳转，实现真正的无限滚动效果。
• 给sticky-el设置z-index:1，确保它始终处于滚动卡片的上层，不会被遮挡。

该方案既保留了transform带来的性能提升和防闪烁优势，同时解决了sticky定位失效的问题。

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