如何实现仅文本溢出时，hover触发CSS滚动动画？

纯CSS无法直接实现这个需求——目前CSS没有原生伪类可以检测容器内容是否溢出，必须借助JavaScript判断内容是否超出容器范围，再针对性启用动画。

具体实现步骤： #

1. 用JS标记溢出容器：遍历所有目标容器，对比容器的scrollHeight（内容总高度）和clientHeight（容器可视高度），如果内容高度超出容器可视范围，给容器添加自定义类（比如overflowable）。
2. CSS针对标记类写动画：只给带有overflowable类的容器设置悬停滚动动画，无此类的容器不会触发动画。

代码示例： #

HTML（匹配你的示例结构）

<div class="container">
  这是一段很长很长的文本，长度超出容器宽度，需要滚动才能看完所有内容...
</div>
<div class="container">
  短文本，能完全容纳在容器内
</div>

JavaScript

document.querySelectorAll('.container').forEach(container => {
  // 垂直滚动判断scrollHeight > clientHeight，水平滚动则用scrollWidth > clientWidth
  if (container.scrollWidth > container.clientWidth) {
    container.classList.add('overflowable');
  }
});

CSS

.container {
  width: 200px;
  height: 60px;
  border: 1px solid #ddd;
  overflow: hidden;
  white-space: nowrap;
  line-height: 60px;
  margin: 10px 0;
}

/* 仅对溢出容器应用悬停动画 */
.overflowable:hover {
  overflow-x: auto;
  scroll-behavior: smooth;
}

/* 如果是自定义滚动动画（比如文本横向滚动），也只给overflowable类设置 */
.overflowable:hover {
  animation: scrollLeft 8s linear infinite;
}

@keyframes scrollLeft {
  0% { transform: translateX(0); }
  100% { transform: translateX(calc(-100% + 200px)); }
}

这样处理后，只有内容超出容器的元素才会在悬停时触发滚动动画，短文本容器不会有任何动画效果。

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