如何限制CSS marquee滚动长度？解决滚动覆盖元素问题

你的问题核心在于没有限制滚动容器的溢出内容，同时marquee元素的布局逻辑导致动画超出了预期的容器范围。下面优先给你CSS解决方案，简单直接就能实现你要的效果：

问题分析 #

当前的.marquee动画是基于元素自身做位移，但存在两个关键问题：

1. 父容器#sidebar_title没有设置overflow:hidden，导致滚动的文本超出容器后直接覆盖下面的内容；
2. .marquee默认是块级元素，宽度占满容器，动画的translateX是基于容器宽度计算，导致文本滚动的起点/终点不符合“仅在指定容器内滚动”的预期。

CSS解决方案 #

只需要修改几个样式属性，就能让文本严格在红色边框的容器内滚动：

body { background:#222; } 
#sidebar_container { 
  background:transparent; 
  border:1px solid red; 
  width:200px; 
  height:auto; 
  position:fixed; 
  top:100px; 
  left:220px; 
} 
.marquee { 
  display: inline-block; /* 让元素宽度等于文本实际宽度，而非占满容器 */
  animation:marquee 5s linear infinite; 
} 
@keyframes marquee { 
  0% {transform: translateX(100%);} /* 从容器右侧边缘开始滚动 */
  100% {transform: translateX(-100%);} /* 滚动到容器左侧边缘外消失 */
} 
#sidebar_title { 
  font-family:Helvetica; 
  font-weight:bold; 
  text-transform:uppercase; 
  text-align:center; 
  color:#fff; 
  font-size:20px; 
  margin:0 0 10px 0; 
  overflow: hidden; /* 关键：裁剪超出容器的内容，避免覆盖下方元素 */
  white-space: nowrap; /* 强制文本单行显示，保证滚动逻辑正常 */
} 
#sidebar { 
  border:1px solid red; 
  background:transparent; 
  font-family:arial; 
  font-size:14px; 
  width:200px; 
  height:auto; 
  text-align:center; 
} 
.desc_container { 
  border:1px solid red; 
  color:#fff; 
  margin:10px 10px 10px 10px; 
} 
.desc { } 

HTML部分保持原样即可。

效果说明 #

• overflow:hidden让#sidebar_title容器直接裁剪掉超出范围的文本，彻底解决覆盖问题；
• display:inline-block让.marquee的宽度匹配文本实际长度，动画位移的逻辑更贴合“从容器右侧进入、左侧消失”的需求；
• white-space:nowrap确保文本不会换行，维持单行滚动的效果。

可选JS方案（适配动态文本长度） #

如果你的marquee文本长度可能动态变化，想要保持滚动速度一致，可以用JS计算文本宽度，自动调整动画时长：

// 等待DOM加载完成后执行
document.addEventListener('DOMContentLoaded', () => {
  const marqueeEl = document.querySelector('.marquee');
  const containerWidth = document.querySelector('#sidebar_title').offsetWidth;
  const textWidth = marqueeEl.offsetWidth;
  const scrollSpeed = 50; // 滚动速度（像素/秒），可根据需求调整
  const duration = (containerWidth + textWidth) / scrollSpeed;
  marqueeEl.style.animationDuration = `${duration}s`;
});

把这段代码放在页面底部即可，它会根据文本和容器的宽度自动计算合适的动画时长，让滚动速度保持均匀。

内容的提问来源于stack exchange，提问作者ghostyTrickster