div 自动滚动的方式

1.只需将HTML和CSS代码稍微更改即可。以下是一个示例，使用div作为滚动框，内部div包含滚动内容：

HTML代码：

<div class="scroll-box">
<div class="scroll-content">
<div>内容1</div>
<div>内容2</div>
<div>内容3</div>
<div>内容4</div>
<div>内容5</div>
</div>
</div>

CSS代码：

.scroll-box {
overflow: hidden;
}
.scroll-content {
animation: scroll 10s linear infinite;
}
@keyframes scroll {
0% {
transform: translateY(0);
}
100% {
transform: translateY(-100%);
}
}
div {
margin: 10px 0;
height: 20px;
}

该代码使用CSS动画实现滚动效果，通过将滚动内容div应用动画实现滚动。可以根据需要调整动画时间、滚动内容高度等参数。如果需要暂停、继续滚动可以通过JavaScript控制animation-play-state属性实现。

一个页面可以用多个滚动的

div

。

可能是你的另一个

div

没有设置正确的样式，比如

overflow: hidden

或者缺少必要的样式。你可以检查一下另一个

div

的 CSS 样式，确保它设置正确。同时也需要注意，如果两个

div

的滚动速度相差很大，可能会导致其中一个

div

被另一个

div

盖住，这时可以通过调整

z-index

属性来解决。

另外，有些浏览器可能会在某些情况下出现某些元素无法滚动的问题，这时可以试试添加

-webkit-overflow-scrolling: touch

样式来修复。

2可以使用CSS的动画或JavaScript的定时器来实现自动滚动效果。以下是使用JavaScript的示例代码：

HTML代码：

<div class="scroll-box">
<ul>
<li>内容1</li>
<li>内容2</li>
<li>内容3</li>
<li>内容4</li>
<li>内容5</li>
</ul>
</div>

CSS代码：

.scroll-box {
overflow: hidden;
}
ul {
list-style: none;
margin: 0;
padding: 0;
}
li {
margin: 10px 0;
height: 20px;
}

JavaScript代码：

function autoScroll() {
var box = document.querySelector('.scroll-box');
var ul = box.querySelector('ul');
var liHeight = ul.querySelector('li').offsetHeight;
var speed = 50; // 滚动速度，单位：像素/秒
var delay = 2000; // 停留时间，单位：毫秒
var timer;
// 复制列表项
var clone = ul.cloneNode(true);
ul.appendChild(clone);
// 滚动函数
function scroll() {
if (box.scrollTop % liHeight == 0 && !box.noScroll) {
clearTimeout(timer);
setTimeout(function() {
box.noScroll = true;
timer = setInterval(function() {
box.scrollTop++;
if (box.scrollTop % liHeight == 0) {
clearInterval(timer);
box.noScroll = false;
scroll();
}
}, speed / liHeight);
}, delay);
} else {
setTimeout(scroll, 0);
}
}
// 开始滚动
setTimeout(scroll, delay);
}
autoScroll();

该代码实现了在div滚动框中自动滚动内容。可以根据需要调整滚动速度、停留时间等参数。