Table内容⾃动滚动<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Table⾃动滚动</title>
<script type="text/javascript" src="jquery.min.js"></script>
</head>
<style>
*{
margin:0;padding: 0;overflow: hidden;
}
table tr {
height: 30px;
}
table tr:nth-child(even) {
background-color: rgb(249,249,249)
}
#scrollTable{
height: 300px;
overflow-y: scroll;
font-size: 12px;
}
/
* 设置滚动条的样式 */
#scrollTable::-webkit-scrollbar {
width:10px;
background-color: white;
}
/* 滚动槽 */
#scrollTable::-webkit-scrollbar-track {
border-radius:10px;
}
/* 滚动条滑块 */
#scrollTable::-webkit-scrollbar-thumb {
border-radius:10px;
background: #ccc;
visibility: hidden; /*默认占位隐藏*/
}
/* 滚动条显⽰，但占位*/
#scrollTable.show-scrollbar::-webkit-scrollbar-thumb{
visibility: visible;
}
</style>
<body>
<div  >
<table >
<tr>
<td width="30%">AAA</td>
<td width="20%">BBB</td>
<td width="20%">CCC</td>
<td width="30%">DDD</td>
</tr>
</table>
<div id="scrollTable">
html滚动效果代码<table cellspacing="0" cellpadding="0">
<tr>
<td width="30%">A123</td>
<td width="20%">134</td>
<td width="20%">23</td>
<td width="30%">1234</td>
</tr>
<tr><td>1</td><td>134</td><td>23</td><td>1234</td></tr>
<tr><td>2</td><td>134</td><td>23</td><td>1234</td></tr>
<tr><td>3</td><td>134</td><td>23</td><td>1234</td></tr>
<tr><td>4</td><td>134</td><td>23</td><td>1234</td></tr>
<tr><td>5</td><td>134</td><td>23</td><td>1234</td></tr>
<tr><td>6</td><td>134</td><td>23</td><td>1234</td></tr>
<tr><td>7</td><td>134</td><td>23</td><td>1234</td></tr>
<tr><td>8</td><td>134</td><td>23</td><td>1234</td></tr>
<tr><td>9</td><td>134</td><td>23</td><td>1234</td></tr>
<tr><td>10</td><td>134</td><td>23</td><td>1234</td></tr>
<tr><td>11</td><td>134</td><td>23</td><td>1234</td></tr>
<tr><td>12</td><td>134</td><td>23</td><td>1234</td></tr>
<tr><td>13</td><td>134</td><td>23</td><td>1234</td></tr>
<tr><td>14</td><td>134</td><td>23</td><td>1234</td></tr>
<tr><td>15</td><td>134</td><td>23</td><td>1234</td></tr>
<tr><td>16</td><td>134</td><td>23</td><td>1234</td></tr>
<tr><td>17</td><td>134</td><td>23</td><td>1234</td></tr>
<tr><td>18</td><td>134</td><td>23</td><td>1234</td></tr>
</table>
</div>
</div>
<script type="text/javascript">
let $_scrollDiv = $("#scrollTable"); // 滚动DIV
let scrollTimer; // 定时函数
function scrollMean(){
let divHeight = $_scrollDiv.height(); // 获取滚动div的整体⾼度
let trLength = $_scrollDiv.find("table > tbody > tr").length; // 获取滚动div内table中tr的条数            let trHeight = $_scrollDiv.find("table > tbody > tr:first").height(); // 获取tr的⾏⾼
let scrollTopNum = $_scrollDiv.scrollTop(); // 滚动条⾼度
if (trHeight * trLength > divHeight) { // 所有tr加起来的⾼度 > div⾼度，则执⾏滚动
scrollTimer = setInterval(function () {
$_scrollDiv.scrollTop(scrollTopNum++);
if (scrollTopNum >= divHeight) { // 触底则重新回到顶部，继续滚动
scrollTopNum = 0;
}
},20)
}
}
$(function () { // 页⾯元素加载完毕后开始执⾏
scrollMean();
$_scrollDiv.hover(function () { // ⿏标移⼊
clearInterval(scrollTimer);
$_scrollDiv.addClass("show-scrollbar"); // 显⽰滚动条
},function () { // ⿏标移出
$_veClass("show-scrollbar"); // 隐藏滚动条
scrollMean();
});
});
</script>
</body>
</html>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。