表格内容添加自动滚动效果

css样式

.table_content{
            width: 100%;
            flex: 1;
            display: flex;
            justify-content: flex-start;
            flex-direction: column;
            overflow: auto;
        }
        .table_th{
            flex: 1;
            padding: 10px;
            box-sizing: border-box;
            border-left: 1px solid #ddd;
        }
        .table_tr{
            width: 100%;
            display: flex;
            flex-direction: row;
            justify-content: space-around;
            border-bottom: 1px solid #ddd;
            box-sizing: border-box;
        }
        .table_td {
            flex: 1;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            padding: 10px;
            border-left: 1px solid #ddd;
        }

html元素

            <div id="table_content" class="table_content">
                
            </div>

js代码

<script>
        var scrollTimer = null
        var durationTimer = null
        var resetSrollTimer = null
        window.onload = function(){
            backLogoImg()
            createWebSocket()
            var el = ''
            for(var i=0; i< 20; i++) {
                el = el +
                "<div class='table_tr'>"
                    + "<span class='table_td' title='" + i + "'>" + i + "</span>"
                    + "<span class='table_td' title='" + i + "'>" + i + "</span>"
                    + "<span class='table_td' title='" + i + "'>" + i + "</span>"
                + "</div>"
            }
            document.getElementById('table_content').innerHTML = el
            var table_el = document.getElementById('table_content')
            var table_h = table_el.clientHeight
            var table_tr_h = document.getElementsByClassName('table_tr')[0].clientHeight + 1.7
            var table_scroll_top = table_el.scrollTop
            console.log('table_h = ', table_h)
            console.log('table_tr_h = ', table_tr_h)
            console.log('table_scroll_top = ', table_scroll_top)
            scrollMove(table_h, table_tr_h, 20)
        }
        
       
        function scrollMove(table_h, table_tr_h, dataLength) {
                
                var table_cont_h = table_tr_h * dataLength
                var table_el = document.getElementById('table_content')

                if (scrollTimer) {
                    clearInterval(scrollTimer)
                }

                if (durationTimer) {
                    clearTimeout(durationTimer)
                }

                // 当数据长度超过了列表可展示最大长度，再设置滚动
                if (table_cont_h > table_h) {

                    // 如果滚动到底部了，设置scrollTop为0
                    if (table_el.scrollTop >= table_cont_h - table_h - 1.7 * dataLength) {
                        table_el.scrollTop = 0
                    }
                    var timeout = table_el.scrollTop === 0 ? 2000 : 0
                    resetSrollTimer = setTimeout(() => {
                        scrollTimer = setInterval(() => {

                            // 列表容器的scrollTop每隔10毫秒加1，以此形成动画
                            table_el.scrollTop++

                            // 每滚动一条数据，暂停2秒
                            if (parseInt(table_el.scrollTop % table_tr_h) === 0) {
                                if (scrollTimer) {
                                    clearInterval(scrollTimer)
                                }
                                if (durationTimer) {
                                    clearTimeout(durationTimer)
                                }
                                durationTimer = setTimeout( function () {
                                    scrollMove(table_h, table_tr_h, dataLength)
                                }, 2000)
                            }

                        }, 10)
                    }, timeout);
                }
            }
        window.onbeforeunload = function() {

                clearInterval(durationTimer)
                clearTimeout(scrollTimer)
                clearTimeout(resetSrollTimer)
            }
</script>