Table内容自动滚动 

<!DOCTYPE html>
<html lang="en" style="height: 100%;">
<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  style="height: 400px;border: 1px solid darkgrey">
        <table style="width: 100%;text-align: center;">
            <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">
            <table style="width: 100%;text-align: center;" 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 () { // 鼠标移出
                $_scrollDiv.removeClass("show-scrollbar"); // 隐藏滚动条
                scrollMean();
            });
        });
    </script>
</body>
</html>
posted @ 2021-12-14 16:23  迷路小孩  阅读(840)  评论(0)    收藏  举报