table持续滚动

最新推荐文章于 2024-07-24 11:31:22 发布

百味苦

最新推荐文章于 2024-07-24 11:31:22 发布

阅读量1.4k

点赞数

分类专栏： html js，JQuery 文章标签： table持续滚动

本文链接：https://blog.csdn.net/qq_38026437/article/details/86154069

版权

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

摘要由CSDN通过智能技术生成

做了个简单的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