js实现表格无缝滚动

最新推荐文章于 2024-03-29 16:35:41 发布

Shuanger_06

最新推荐文章于 2024-03-29 16:35:41 发布

阅读量569

点赞数

分类专栏： JavaScript 文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/weixin_44389116/article/details/131537526

版权

JavaScript 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

CSS部分

<style type="text/css">
	* {
		padding: 0;
		margin: 0;
		list-style: none;
	}
	.scroll-content {
		width: 500px;
		height: 280px;
		border: solid 1px #000;
	}
	.company-content {
		width: 100%;
		height: calc(100% - 35px);
		overflow: hidden;/*滚动区域父元素超出部分隐藏*/
	}
	
	.company-list li {
		height: 35px;
		line-height: 35px;
		border-bottom: solid 1px #000;
	}
	
	.company-list li span {
		display: inline-block;
		width: 33%;
		text-align: center;
	}
</style>

body部分

<div class="scroll-content"></div>

JavaScript部分

<script src="resource/js/jquery-2.1.0.js"></script>
<script type="text/javascript">
	var tableList = [
		['XXX000', '2022-12-01', '234'],
		['XXX111', '2022-12-01', '234'],
		['XXX222', '2022-12-01', '234'],
		['XXX333', '2022-12-01', '234'],
		['XXX444', '2022-12-01', '234'],
		['XXX555', '2022-12-01', '234'],
		['XXX666', '2022-12-01', '234'],
		['XXX777', '2022-12-01', '234'],
		['XXX888', '2022-12-01', '234'],
		['XXX999', '2022-12-01', '234']
	];
	
	getList(tableList);
	
	function getList(data) {
		var header = '<ul class="company-list"><li><span>名称</span><span>时间</span><span>数量</span></li></ul>';
		
		var tableStr = '<ul class="company-list child">';
		for(let i = 0; i < data.length; i++) {
			tableStr += '<li><span>' + data[i][0] + '</span><span>' + data[i][1] + '</span><span>' + data[i][2] + '</span></li>';
		}
		tableStr += '</ul>';
		
		// 父元素内插入两个相同子元素，实现无缝滚动效果
		$(".scroll-content").html(header + '<div class="company-content">' + tableStr + tableStr + '</div>');
		let parent = $(".company-content")[0];// 滚动元素的父元素
		let child = $(".company-content .child")[0];// 滚动元素
		
		var timer = setInterval(function() {
			if(parent.scrollTop >= child.scrollHeight) {
				parent.scrollTop = 0;
			} else {
				parent.scrollTop = parent.scrollTop + parseFloat((1 / window.devicePixelRatio).toFixed(2)) + 0.01;
			}
		}, 50);
	}
</script>