文字跑马灯：实现文字自动滚动策略的原理分析
内容提要
本文分析了实现文字自动滚动策略的原理。讲解了<marquee>元素的弃用，以及如何通过CSS动画实现文字滚动效果。给出了示例代码和总结。
延伸解读
宽度判断：两个API的差异与选择
文章强调判断文字是否超出容器是跑马灯的核心。获取文字宽度使用el.getBoundingClientRect().width，它包含内边距和边框，且受页面滚动影响；获取容器宽度使用el.clientWidth，它表示内容区宽度，不包含边框和外边距，也不受滚动影响。理解这两个API的差异，才能准确判断是否需要滚动，避免误判。
CSS动画实现滚动的关键点
文章通过示例展示了用CSS动画实现文字滚动。父容器设置overflow: hidden隐藏超出部分，文字元素设置white-space: nowrap防止换行，并用display: inline-block使其水平排列。@keyframes定义从translateX(0)到translateX(-100%)的动画，配合animation属性实现匀速无限循环滚动。这种方案不依赖已弃用的<marquee>元素。
JavaScript控制动画启停
文章提到可以通过JavaScript动态控制动画的开始、暂停和重启。例如，通过修改元素的animationPlayState属性为'paused'或'running'来暂停或恢复滚动。也可以动态添加或移除动画类名来控制滚动效果的启停。这为需要交互控制的场景提供了灵活性。
从<marquee>到自定义实现的演进
文章指出<marquee>元素已被官方弃用，不建议使用，且它不支持自动判断文字宽度是否超出容器。因此，自定义实现成为更可靠的选择。通过结合宽度判断和CSS动画，可以按需触发滚动，既避免了使用过时元素的风险，也实现了更精细的控制。
Q&A
文字跑马灯的主要功能是什么？
文字跑马灯用于动态展示内容，吸引用户注意力。
<marquee>元素为什么不建议使用？
<marquee>元素已被弃用，不支持动态判断文本宽度，可能在未来无法正常工作。
如何判断文本是否超出容器宽度？
可以通过el.getBoundingClientRect().width获取文本宽度，el.clientWidth获取容器宽度，判断两者关系。
实现文字跑马灯的关键步骤是什么？
关键步骤包括判断文本宽度、设置CSS动画和控制动画的开始与暂停。
如何使用CSS实现文字的滚动效果？
通过设置overflow: hidden;和@keyframes定义动画，实现文字从左到右的滚动效果。
可以用JavaScript控制文字跑马灯的哪些功能？
可以用JavaScript控制动画的开始、暂停和重启。
