需求
- 当消息超出内容区域时滚动显示
方法
- 当消息内容超出总内容区域时添加一个与当前消息内容一摸一样的 dom 元素
- 将总内容区域的 overflow 设置为 hidden，隐藏多余内容
- 然后控制总内容区域的 scrollTop 来向上轮播
- 然后当总内容区域的 scrollTop 大于第二个 dom 元素的 offsetTop
- 证明第二个 dom 元素刚好滚动到第一个 dom 元素初始位置
- 将总内容区域的 scrollTop 减去第一个元素的高度
扩展
offsetTop 距离上方或上层控件的位置，整型，单位像素scrollTop 内容顶部（卷起来的）到它的视口可见内容（的顶部）的距离的度量offsetHeight 一个元素的高度包括边框和填充，但不是边距
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>消息滚动</title>
<style type="text/css">
#root {
height: 100px;
overflow: hidden;
}
ul {
padding: 0;
margin: 0;
}
.item {
height: 20px;
}
</style>
</head>
<body>
<div id="root">
<ul class="content">
<li class="item">
滚动消息一
</li>
<li class="item">
滚动消息二
</li>
<li class="item">
滚动消息三
</li>
<li class="item">
滚动消息四
</li>
<li class="item">
滚动消息五
</li>
<li class="item">
滚动消息六
</li>
<li class="item">
滚动消息七
</li>
</ul>
</div>
<script>
const root = document.getElementById(‘root‘); // 获取外部容器
console.log(root.offsetHeight,root.scrollTop)
const content = document.getElementsByClassName(‘content‘)[0]; // 获取消息容器
console.log(content.offsetHeight,content.scrollTop)
const content2 = document.createElement("ul"); // 创建第二个消息内部容器
setTimeout(() => {
const speed = 80 // 速度
// 当消息超出外部容器时
if (root.offsetHeight < content.offsetHeight) {
content2.innerHTML = content.innerHTML;
root.append(content2);
}
function Marquee() {
// content2.offsetTop 距离上方或上层控件的位置，整型，单位像素
// root.scrollTop 内容顶部（卷起来的）到它的视口可见内容（的顶部）的距离的度量
if (content2.offsetTop - root.scrollTop <= 0)
root.scrollTop -= content.offsetHeight
else {
root.scrollTop++
}
}
setInterval(Marquee, speed)
}, 1000)
</script>
</body>
</html>