17370845950

本文介绍一种实用方案：仅当容器内文本实际溢出时，才在 hover 时触发动画滚动；若文本完全可见，则禁用动画。纯 css 无法可靠检测溢出，因此需结合轻量 javascript 动态添加/移除滚动类。

在构建响应式 UI 组件（如标签芯片、状态提示栏）时，常需实现“悬停滚动长文本”的交互效果。但若对所有文本统一启用 animation，会导致短文本也出现无意义的位移动画，影响体验与性能。关键挑战在于：CSS 本身不具备检测 offsetWidth > parent.clientWidth 的能力，因此必须借助 JavaScript 进行运行时判定。

✅ 推荐实现方案（轻量 JS + 语义化 CSS）

核心思路是：

1. 预定义一个带 hover 动画的 CSS 类（如 .scrolled:hover）；
2. 页面加载后，遍历目标元素，对比其 offsetWidth 与父容器可用宽度；
3. 仅当文本真实溢出时，才为其添加 .scrolled 类 —— 此时 hover 才会触发动画。

以下是完整可运行代码：

/* 容器基础样式（固定宽度 + 隐藏溢出） */
.chip-container {
  max-width: 400px;
  height: 32px;
  font-size: 0.8125rem;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  overflow: hidden;
  border-radius: 16px;
  background-color: #666;
  color: white;
  margin: 3px;
}

/* 文本内容区（不设宽，依赖内容伸缩） */
.chip-value {
  display: inline-block;
  position: relative;
  margin: 0 5px;
  text-overflow: clip; /* 防止 ellipsis 干扰宽度计算 */
}

/* 滚动动画类 —— 仅当存在该类时，hover 才生效 */
.scrolled:hover {
  animation: scroll-rtl 15s linear forwards;
}

@keyframes scroll-rtl {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}

  Very very very very very very very very very very long text...


  Not long

// 初始化：为所有溢出的 .chip-value 添加 .scrolled 类
document.querySelectorAll('.chip-value').forEach(el => {
  const parent = el.parentElement;
  // 使用 getComputedStyle 确保获取准确的可用宽度（兼容 padding/margin）
  const parentWidth = parent.clientWidth;
  if (el.offsetWidth > parentWidth) {
    el.classList.add('scrolled');
  }
});

⚠️ 注意事项与优化建议

• 宽度判定逻辑：使用 el.offsetWidth > parent.clientWidth 而非硬编码 400，确保适配不同尺寸容器（如响应式布局或动态修改 max-width 的场景）；
• 性能考量：该脚本仅在初始化时执行一次，无监听开销；如需支持动态内容更新（如 AJAX 加载），可封装为函数并手动调用；
• 无障碍友好：滚动动画可能对部分用户造成不适，建议在 prefers-reduced-motion: reduce 下禁用动画：

  @media (prefers-reduced-motion: reduce) {
    .scrolled:hover {
      animation: none;
    }
  }

• 替代方案提醒：若严格要求零 JS，可考虑 CSS @container 查询（实验性，需开启 flag），但目前兼容性有限，不推荐生产环境使用。

通过此方案，你既能保持 CSS 动画的声明式优雅，又能精准控制交互逻辑 —— 真正实现「有溢出才滚动，无溢出不干扰」的高质量用户体验。