本文详解通过 CSS position: absolute + fit-content 宽度 + 精确 left 与 transform 配合，结合 JavaScript 动态计算动画时长，解决传统 marquee 因宽度误设导致的视觉断层问题，实现真正无缝循环滚动。
本文详解通过 css `position: absolute` + `fit-content` 宽度 + 精确 `left` 与 `transform` 配合，结合 javascript 动态计算动画时长，解决传统 marquee 因宽度误设导致的视觉断层问题，实现真正无缝循环滚动。
实现真正无缝的无限滚动文字（即“跑马灯”效果），关键在于让文本元素在完全移出视口左边界的同时，立即从右侧重新出现——而非依赖固定百分比位移造成空白等待期。原始方案中将 #marqueeText 设置为 width: 100%，导致其实际宽度远超文本真实长度，动画从 translate3d(100%, 0, 0) 到 translate3d(-100%, 0, 0) 实际移动距离过大（等于容器宽），造成明显停顿。
✅ 正确解法核心有三步：
- 让文本容器真实贴合内容宽度：将 #marqueeText 的 width 改为 fit-content（或 max-content），确保 offsetWidth 准确反映文本实际像素宽度；
- 用 left 控制起始/结束位置，transform: translateX() 辅助微调：起始时设 left: 100%（完全右出视口），结束时设 left: 0 + transform: translateX(-100%)（向左平移自身宽度，精准对齐左边界）；
- 动态计算动画时长，保持恒定滚动速度：基于文本真实宽度 textWidth 与容器宽 containerWidth，计算总位移 distance = textWidth + containerWidth，再按预设像素/毫秒速率（如 5ms/px）得出总时长。
以下是完整可运行代码示例：
<div class="d-none d-lg-flex row topmarquee mt-4">
<div class="marquee">
<p id="marqueeText" class="marqueeText mb-0">
This is a test website — seamless infinite scrolling
</p>
</div>
</div>.topmarquee {
width: 100%;
border: 1px solid #000;
}
.topmarquee .marquee {
width: calc(100% - 200px); /* 根据实际布局调整 */
position: relative;
overflow: hidden;
height: 31px;
}
.topmarquee .marquee #marqueeText {
display: block;
position: absolute;
top: 0;
margin: 0;
white-space: nowrap;
line-height: 31px;
/* 关键：脱离父容器宽度约束，真实匹配文本 */
width: fit-content;
/* 起始位置：完全位于视口右侧外 */
left: 100%;
transform: translateX(0);
animation-name: marquee-animation;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
@keyframes marquee-animation {
from {
left: 100%;
transform: translateX(0);
}
to {
/* 结束位置：左边缘对齐容器左边界，同时向左平移自身宽度 */
left: 0;
transform: translateX(-100%);
}
}// 动态计算并设置动画时长（保证滚动速度恒定）
const timePerPixel = 5; // 每像素耗时 5ms，可根据需求调整
const containerWidth = document.querySelector('.marquee').offsetWidth;
const text = document.getElementById('marqueeText');
// 注意：必须在 DOM 渲染后获取 offsetWidth（如放在 window.onload 或 setTimeout 中）
const textWidth = text.offsetWidth;
const distance = textWidth + containerWidth; // 总位移 = 文本宽 + 容器宽
const duration = timePerPixel * distance;
text.style.animationDuration = `${duration}ms`;⚠️ 注意事项：
立即学习“前端免费学习笔记（深入）”；
- fit-content 在部分旧版浏览器（如 IE）中不支持，可降级使用 display: inline-block + white-space: nowrap 组合模拟；
- 务必确保 JavaScript 执行时机晚于 DOM 渲染完成（推荐使用 window.addEventListener('load', ...) 或 requestAnimationFrame 包裹）；
- 若文本内容动态更新，需重新触发 offsetWidth 计算及 animationDuration 重设；
- 避免在 .marquee 上设置 padding 或 border，否则需从 containerWidth 中扣除对应值，否则位移计算将产生偏差。
通过以上结构化调整，滚动过程不再出现“消失—等待—重现”的卡顿感，真正达成视觉无缝、节奏一致、响应式友好的专业级文字跑马灯效果。
