这个字幕一直在滚动其他元素，我不知道为什么。我已经尝试使用最大宽度来限制文本可以滚动的空间量，因为我只希望它在这个特定的容器上滚动(在lorem ipsum顶部的红色边框内(。我更喜欢使用css marquee的解决方案，但如果使用js更容易，我也会接受这些答案。谢谢
body {
background:#222;
}
#sidebar_container {
background:transparent;
border:1px solid red;
width:200px;
height:auto;
position:fixed;
top:100px;
left:220px;
}
.marquee {
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;
}
#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 {
}<body>
<div id="sidebar_container">
<div id="sidebar_title"><div class="marquee">Marquee Text</div></div>
<div id="sidebar">
<div class="desc_container">
<div class="desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</div> <!-- desc container -->
</div> <!-- sidebar -->
</div> <!-- sidebar container -->
</body>这是您想要的结果吗？将overflow: hidden添加到#sidebar_title
body {
background:#222;
}
#sidebar_container {
background:transparent;
border:1px solid red;
width:200px;
height:auto;
position:fixed;
top:100px;
left:220px;
}
.marquee {
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;
}
#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 {
}<body>
<div id="sidebar_container">
<div id="sidebar_title"><div class="marquee">Marquee Text</div></div>
<div id="sidebar">
<div class="desc_container">
<div class="desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</div> <!-- desc container -->
</div> <!-- sidebar -->
</div> <!-- sidebar container -->
</body>