通过 javascript 动态检测元素是否溢出容器，并仅对溢出文本添加 hover 滚动动画，可精准控制 css 动画的启用时机，避免短文本误触发滚动。
在构建响应式 UI 组件（如标签芯片、状态徽章）时，常需为超长文本添加水平滚动效果以提升可读性。但若对所有文本无差别应用 @keyframes 滚动动画，会导致短文本在悬停时产生无效位移，破坏用户体验。纯 CSS 无法可靠判断内容是否溢出（:has() 伪类暂不支持 overflow 相关条件，且 scrollWidth > clientWidth 无对应 CSS 状态），因此需借助轻量 JavaScript 实现智能判定。
✅ 推荐实现方案（JS + CSS）
核心思路：在 DOM 加载后，遍历目标元素，比较其 scrollWidth（实际内容宽度）与 clientWidth（可视区域宽度），仅当内容真正溢出时，动态添加可触发动画的类名。
// 等待 DOM 就绪后执行
document.addEventListener('DOMContentLoaded', () => {
document.querySelectorAll('.chip-value').forEach(el => {
// 关键判断：scrollWidth > clientWidth 表示内容溢出
if (el.scrollWidth > el.clientWidth) {
el.classList.add('scrolled');
}
});
});⚠️ 注意：使用 scrollWidth > clientWidth 比 offsetWidth > 400 更健壮——它基于实际渲染尺寸，兼容不同容器宽度、字体缩放及响应式布局，无需硬编码像素值。
? 对应 CSS 动画定义
.chip-container {
max-width: 400px;
height: 32px;
white-space: nowrap;
overflow: hidden;
background-color: #666;
color: white;
border-radius: 16px;
display: inline-flex;
align-items: center;
padding: 0 5px;
}
.chip-value {
display: inline-block;
margin: 0 5px;
text-overflow: clip; /* 防止省略号干扰滚动 */
/* 确保内容不换行、不压缩 */
white-space: nowrap;
overflow: hidden;
}
/* 仅当 .scrolled 类存在时，悬停才启动动画 */
.scrolled:hover {
animation: scroll-rtl 15s linear infinite;
}
@keyframes scroll-rtl {
0% { transform: translateX(0); }
100% { transform: translateX(-100%); }
}? 进阶优化建议
- 性能友好：使用 infinite 而非 forwards，避免动画结束后卡在末尾位置；若需暂停效果，可配合 animation-play-state: paused。
- 响应式重检：窗口大小变化时（如移动端横竖屏切换），可监听 resize 事件并重新校验溢出状态（注意防抖）。
- 无障碍友好：为滚动文本添加 aria-live="polite" 或提供“暂停动画”按钮，满足 WCAG 标准。
此方案兼顾语义清晰、逻辑严谨与生产可用性，是当前实现「按需滚动」最成熟可靠的实践方式。
