在页面开发场景中，当文本内容的宽度超过其容器的宽度时，我们往往希望仅在发生溢出的情况下才为文本添加自动滚动动画，避免无意义的动画干扰用户。下面将通过CSS和JS结合的方案实现这个需求。
实现思路
整个方案的核心逻辑分为两步：首先通过JS检测文本是否发生溢出，然后仅当溢出时给文本元素添加CSS动画类，触发滚动效果。同时需要处理动画的循环播放、交互控制等细节。
1. 溢出检测逻辑
判断文本是否溢出的核心是比较文本内容的实际宽度和容器的宽度。我们可以通过scrollWidth属性获取文本内容的完整宽度，通过clientWidth属性获取容器的可见宽度，当scrollWidth大于clientWidth时，说明发生了溢出。
2. CSS动画定义
定义文本水平滚动的CSS动画，通过transform: translateX属性实现文本的平移效果，同时设置动画的循环播放和缓动参数。
3. 动态控制动画触发
页面加载完成后先执行溢出检测，仅在溢出时添加动画类；如果后续容器宽度或文本内容发生变化，也需要重新检测并更新动画状态。
完整代码实现
HTML结构
首先定义基础的HTML结构，包含一个文本容器和内部的文本元素：
<div class="text-container" id="textContainer"> <span class="text-content" id="textContent">这是一段很长很长的文本内容，当它超过容器宽度的时候才会触发自动滚动动画</span> </div>
CSS样式
定义容器和文本的样式，以及溢出时的滚动动画：
/* 文本容器样式，固定宽度，隐藏溢出内容 */
.text-container {
width: 200px;
overflow: hidden;
white-space: nowrap;
border: 1px solid #e5e5e5;
padding: 8px 12px;
box-sizing: border-box;
}
/* 文本元素基础样式 */
.text-content {
display: inline-block;
white-space: nowrap;
}
/* 溢出时的滚动动画类 */
.text-content.scroll-animation {
animation: scrollText 5s linear infinite;
}
/* 定义滚动动画 */
@keyframes scrollText {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-50%);
}
}
/* 鼠标悬停时暂停动画 */
.text-content.scroll-animation:hover {
animation-play-state: paused;
}
JavaScript逻辑
编写JS代码实现溢出检测和动画控制：
// 获取DOM元素
const textContainer = document.getElementById('textContainer');
const textContent = document.getElementById('textContent');
/**
* 检测文本是否溢出，动态添加或移除动画类
*/
function checkOverflowAndToggleAnimation() {
// 获取容器可见宽度和文本完整宽度
const containerWidth = textContainer.clientWidth;
const contentWidth = textContent.scrollWidth;
// 判断是否溢出，溢出则添加动画类，否则移除
if (contentWidth > containerWidth) {
textContent.classList.add('scroll-animation');
} else {
textContent.classList.remove('scroll-animation');
}
}
// 页面加载完成后执行检测
window.addEventListener('load', checkOverflowAndToggleAnimation);
// 监听窗口大小变化，重新检测溢出状态
window.addEventListener('resize', checkOverflowAndToggleAnimation);
// 如果文本内容会动态变化，也可以手动调用检测函数
// 例如：textContent.textContent = '新的文本内容'; checkOverflowAndToggleAnimation();
注意事项
- 动画的
translateX(-50%)是相对于文本元素自身的宽度，因此如果文本宽度刚好是容器宽度的两倍，动画会刚好滚动完整个文本内容，实际开发中可以根据需求调整动画的位移比例和时长。 - 如果文本内容是动态加载的，需要在内容加载完成后再次调用
checkOverflowAndToggleAnimation函数，避免检测时内容还未渲染完成导致判断错误。 - 若需要兼容旧版本浏览器，可以将
transform属性添加对应的前缀，比如-webkit-transform。
效果说明
当文本内容的宽度小于等于容器宽度时，文本正常显示，没有滚动动画；当文本内容宽度超过容器宽度时，文本会自动向左滚动，鼠标悬停在文本上时动画暂停，移开后续继续播放，完全符合仅在溢出时启用滚动动画的需求。