利用JS、CSS实现列表自动滑动滚动
是洋洋a 2024-07-04 08:05:04 阅读 87
零.业务需求
这几天在做大屏项目，对于大屏有很多信息需要实时滚动，废了点力气学的明明白白的，特来记录供大家学习。
0.1实现效果
一.逻辑分析
1.1滑动窗口和滚动条
当我们使用<table>或者<ul>标签时，我们可以制作一个滚动条，通过滚动条来实现我们想要查看的内容。
在滚动窗口内，“已经滚动过去”的区域我们称为：“scrollHeight”，“还未滚动到”的 区域我们称为：“scrollBottom”，“当前显示区域”称为：“scrollNow”。
我们再用一张图来描述一下，上面三个概念：
（可能有点丑...）
为方便，上面这一整个区域(scrollTop、scrollNow、scrollBottom)，我们统称为：“滑动窗口”
1.2逻辑构思
如果我们有：“两份一模一样的数据顺序排列在一起形成一份数据”，再将这一份数据中的“元素”挨个展示在我们的“scrollNow”区域中，当这份数据的最后一个“元素”被展示时，我们重新让一整份数据从头开始，这样就在视觉上实现了滚动的效果。
在这里，有一个关键性的问题：“两份数据的长度一定要大于显示区域的长度，否则将无法实现滑动”
至于为什么，大家思考一下就行，当我们的数据滑动时，滑动过去的数据被“隐藏”了，但并不是消失了！
如果我们的“可显示区域”大于“数据”的长度，那么就会出现下面的情况：
当显示区域的长度足够容纳：“所有的数据”，此时还有“滑动”的必要吗？？？
我们“滑动”的原因是因为：“数据量太大，展示区域有限，故让它滑动方便查看”
1.3伪代码实现
在js中，有几个属性：
“scrollTop”用来“设置或者获取”元素的已滚动的上部“不可见区域”的高度，这个概念就是我们上述讲的“scrollTop”(已经滚动过的区域)
“scrollHeight”用来“返回”元素所有内容的“总高度”(包括折叠不见的)，这个就是我们上述所说的(scrollTop+scrollNow+scrollBottom)
利用这几个属性，我们可以设定一个计时器用来计时，每次计时器加值时，scrollTop的值随之加值(向上滚动)，从而实现了滚动。
二.代码实现
2.1创建骨架
我们先创建一个div盒子，作为整个列表的骨架：
<code> <div id="review_box">code>
<ul id="comment1">code>
<li>第一条</li>
<li>第二条</li>
<li>第三条</li>
<li>第四条</li>
<li>第五条</li>
<li>第六条</li>
</ul>
<ul id="comment2"></ul>code>
</div>
其中“comment1”<ul>是原数据，“comment2”<ul>是原数据的副本，这两部分数据组合在一起形成我们的“一整个数据”
而<li>就是我们的“元素”，方便起见我这里内置数据，后面根据需要可以自己再写一个函数添加数据。
2.2创建样式
只有骨架是不行的，没有用到CSS美观是很丑的，如果不使用CSS，那么就是下图这个样子：
为此我们使用如下代码：
<code> <style>
div {
width: 100px;
height: 100px; /*列表的长度*/
overflow: hidden;/* 必须 */
margin: 50px auto;
border: 1px solid red;
text-align: center;
}
ul {
margin: 0;
padding: 0; /*元素居中*/
list-style: none; /*去掉元素前面的标签*/
}
li{
height: 20px; /*元素高度,数据的高度等于元素个数乘元素高度*/
}
</style>
2.3JS代码
我们先创建一个“roll”滚动函数，用来实现控制“鼠标悬停在列表上时暂停滚动”、“鼠标离开列表时继续滚动”
我们分别使用：“onmouseover”和“onmouseout”两个事件来完成。
实现“向上滚动”和“向下滚动”在js中有些许不同，这里先以“向上滚动”为例
function roll(t) {
var ul1 = document.getElementById("comment1");
var ul2 = document.getElementById("comment2");
var ulbox = document.getElementById("review_box");
ul2.innerHTML = ul1.innerHTML;
ulbox.scrollTop = 0; // 开始无滚动时设为0
var timer = setInterval(rollStart, t); // 设置定时器，参数t用在这为间隔时间（单位毫秒），参数t越小，滚动速度越快
// 鼠标移入div时暂停滚动
ulbox.onmouseover = function () {
clearInterval(timer);
}
// 鼠标移出div后继续滚动
ulbox.onmouseout = function () {
timer = setInterval(rollStart, t);
}
}
我们再创建一个“rollStart”函数，用来启动“自动滑动”
function rollStart() {
// 上面声明的DOM对象为局部对象需要再次声明
var ul1 = document.getElementById("comment1");
var ul2 = document.getElementById("comment2");
var ulbox = document.getElementById("review_box");
// 正常滚动不断给scrollTop的值+1,当滚动高度大于列表内容高度时恢复为0
if (ulbox.scrollTop >= ul1.scrollHeight) {
ulbox.scrollTop = 0;
} else {
ulbox.scrollTop += 1;
}
}
最后，在代码的最前面加一句：
window.onload = roll(20);
用来代码在页面加载完毕时自动启动，一切就完成啦！！
附：
如果想要列表向下滚动，我们只改动三处数值即可：
ulbox.scrollTop = ul1.scrollHeight; // 开始无滚动时设列表最长高度,用来表示到底了
上面将初始“scrollTop”置为最大值，表示此时数据底部到底了，即无法继续向下滑动，只能向上滑动
// 正常滚动不断给scrollTop的值减一,当滚动高度小于等于0时，需要重新为最大高度
if (ulbox.scrollTop > 0) {
ulbox.scrollTop = ul1.scrollHeight;
}
else {
ulbox.scrollTop -= 1;
}
上面控制“scrollTop”的值每次减一，如果小于等于0了，说明此时数据顶部到底了，即无法继续向上滑动，只能向下滑动
值得注意：
若向下滑动，对应的数据也应是逆置的，否则将会出现部分数据无法正常滑动：
<div id="review_box">code>
<ul id="comment1">code>
<li>第六条</li>
<li>第五条</li>
<li>第四条</li>
<li>第三条</li>
<li>第二条</li>
<li>第一条</li>
</ul>
<ul id="comment2"></ul>code>
</div>
不过若此时(列表长度等于原数据长度[不是整个数据]的高度,那么数据可以不用逆置)
三.全部代码
下面代码，复制粘贴即可使用
<!DOCTYPE html>
<html lang="en">code>
<head>
<meta charset="UTF-8">code>
<meta name="viewport" content="width=device-width, initial-scale=1.0">code>
<title>Document</title>
<style>
div {
width: 100px;
height: 100px; /*列表的长度*/
overflow: hidden;/* 必须 */
margin: 50px auto;
border: 1px solid red;
text-align: center;
}
ul {
margin: 0;
padding: 0; /*元素居中*/
list-style: none; /*去掉元素前面的标签*/
}
li{
height: 30px; /*元素高度,数据的高度等于元素个数乘元素高度*/
}
</style>
</head>
<body>
<div id="review_box">code>
<ul id="comment1">code>
<li>第一条</li>
<li>第二条</li>
<li>第三条</li>
<li>第四条</li>
<li>第五条</li>
<li>第六条</li>
</ul>
<ul id="comment2"></ul>code>
</div>
<script>
window.onload = roll(20);
function roll(t) {
var ul1 = document.getElementById("comment1");
var ul2 = document.getElementById("comment2");
var ulbox = document.getElementById("review_box");
ul2.innerHTML = ul1.innerHTML;
ulbox.scrollTop = 0; // 开始无滚动时设为0
var timer = setInterval(rollStart, t); // 设置定时器，参数t用在这为间隔时间（单位毫秒），参数t越小，滚动速度越快
// 鼠标移入div时暂停滚动
ulbox.onmouseover = function () {
clearInterval(timer);
}
// 鼠标移出div后继续滚动
ulbox.onmouseout = function () {
timer = setInterval(rollStart, t);
}
}
// 开始滚动函数
function rollStart() {
// 上面声明的DOM对象为局部对象需要再次声明
var ul1 = document.getElementById("comment1");
var ul2 = document.getElementById("comment2");
var ulbox = document.getElementById("review_box");
// 正常滚动不断给scrollTop的值+1,当滚动高度大于列表内容高度时恢复为0
if (ulbox.scrollTop >= ul1.scrollHeight) {
ulbox.scrollTop = 0;
} else {
ulbox.scrollTop += 1;
}
}
</script>
</body>
</html>
声明
本文内容仅代表作者观点，或转载于其他网站，本站不以此文作为商业用途
如有涉及侵权，请联系本站进行删除
转载本站原创文章，请注明来源及作者。