table持续滚动

最新推荐文章于 2026-03-14 01:46:09 发布

原创最新推荐文章于 2026-03-14 01:46:09 发布 · 1.5k 阅读

2 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#table持续滚动

js，JQuery 同时被 2 个专栏收录

36 篇文章

订阅专栏

html

26 篇文章

订阅专栏

本文介绍了一个简单的JavaScript实现表格（Table）持续滚动的Demo。通过在Table外部添加固定高度的div，并设置溢出隐藏，利用scrollTop属性实现滚动效果。当滚动到顶部时可能会出现轻微卡顿问题。

做了个简单的table滚动demo

思路：早table外部加一个div标签设置固定高度，这个高度是table tr的高度的倍数就可以了，

然后溢出隐藏，在用js设置scrollTop 就可以实现滚动特效，如果超出就变为0.

因为是用scrollTop，变成0的时候难免会有点卡顿。

代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<link href="css/mui.min.css" rel="stylesheet" />
		<style type="text/css">
			.main{
				width: 100%;
				padding: 2em;
			}
			.scrolldiv{
				height: 120px;
	         	overflow: hidden;
			}
			table{
	    		width: 100%;
	         	overflow: hidden;
    	}
    	table tr{
    		line-height:24px;
    	}
    	table td{
    		text-align: center;
    		color: #F4C7FD;
    	}
    	table tr:nth-child(odd){
			background: #8C49F1;
		}
		table tr:nth-child(even){
			background: #7C35EB;
		}
		</style>
	</head>
	<body>
		<div class="main">
			<div class="scrolldiv" id="scrolldiv">
		<table class="" id="tableid">
				 <tr>
				 <td>{$vo.time}</td>
				 <td>{$vo.prize_name}</td>
				 <td>受理成功</td>
				 </tr>
				 <tr>
				 <td>{$vo.time}</td>
				 <td>{$vo.prize_name}</td>
				 <td>受理成功</td>
				 </tr>
				 <tr>
				 <td>{$vo.time}</td>
				 <td>{$vo.prize_name}</td>
				 <td>受理成功</td>
				 </tr>
				 <tr>
				 <td>{$vo.time}</td>
				 <td>{$vo.prize_name}</td>
				 <td>受理成功</td>
				 </tr>
				  <tr>
				 <td>{$vo.time}</td>
				 <td>{$vo.prize_name}</td>
				 <td>受理成功</td>
				 </tr>
				  <tr>
				 <td>{$vo.time}</td>
				 <td>{$vo.prize_name}</td>
				 <td>受理成功</td>
				 </tr>
		</table>
		<table class="" id="tableid2">
		</table>
		</div>
		</div>
		<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
 var table = document.getElementById("tableid");
 var scrolldiv = document.getElementById("scrolldiv");
 let length = table.getElementsByTagName("tr").length;
var speed = 40;
function Marquee() {
		if (scrolldiv.scrollTop > table.clientHeight) {
			scrolldiv.scrollTop = 0;
		} else {
			scrolldiv.scrollTop++;
		}
}
if((length*24) > scrolldiv.clientHeight){
	let table2 = document.getElementById("tableid2");
	table2.innerHTML = table.innerHTML;
	var MyMar = setInterval(Marquee, speed);
}			
		</script>
	</body>
</html>