html

<div class="test003">
                            <div class="test004">
                                <div class="testTop"><span class="span1"> full name </span>
                                    <span class="span2"> state </span>
                                    <span class="span3"> Query score </span>
                                </div>
                                <div id="box">
                                    <ul id="list">
                                        <li><span class="span1">173****3856</span>
                                            <span class="span2"> stay 11:36 Inquire about </span>
                                            <span class="span3">108 branch </span>
                                        <li>
                                        <li><span class="span1">139****1926</span>
                                            <span class="span2"> stay 11:49 Inquire about </span>
                                            <span class="span3">120 branch </span>
                                        <li>
                                        <li><span class="span1">137****2575</span>
                                            <span class="span2"> stay 09:59 Inquire about </span>
                                            <span class="span3">110 branch </span>
                                        <li>
                                        <li><span class="span1">181****6973</span>
                                            <span class="span2"> stay 11:08 Inquire about </span>
                                            <span class="span3">120 branch </span>
                                        <li>
                                        <li><span class="span1">133****1728</span>
                                            <span class="span2"> stay 13:10 Inquire about </span>
                                            <span class="span3">119 branch </span>
                                        <li>
                                        <li><span class="span1">186****2048</span>
                                            <span class="span2"> stay 12:37 Inquire about </span>
                                            <span class="span3">114 branch </span>
                                        <li>
                                        <li><span class="span1">153****0658</span>
                                            <span class="span2"> stay 10:22 Inquire about </span>
                                            <span class="span3">120 branch </span>
                                        <li>
                                        <li><span class="span1">150****3880</span>
                                            <span class="span2"> stay 12:24 Inquire about </span>
                                            <span class="span3">120 branch </span>
                                        <li>
                                        <li><span class="span1">189****5792</span>
                                            <span class="span2"> stay 11:00 Inquire about </span>
                                            <span class="span3">105 branch </span>
                                        <li>
                                        <li><span class="span1">157****3676</span>
                                            <span class="span2"> stay 14:55 Inquire about </span>
                                            <span class="span3">192 branch </span>
                                        <li>
                                        <li><span class="span1">150****3811</span>
                                            <span class="span2"> stay 14:25 Inquire about </span>
                                            <span class="span3">108 branch </span>
                                        <li>
                                        <li><span class="span1">173****4713</span>
                                            <span class="span2"> stay 15:21 Inquire about </span>
                                            <span class="span3">109 branch </span>
                                        <li>
                                        <li><span class="span1">159****7114</span>
                                            <span class="span2"> stay 14:40 Inquire about </span>
                                            <span class="span3">106 branch </span>
                                        <li>
                                        <li><span class="span1">180****2836</span>
                                            <span class="span2"> stay 15:35 Inquire about </span>
                                            <span class="span3">147 branch </span>
                                        <li>
                                        <li><span class="span1">187****3546</span>
                                            <span class="span2"> stay 14:17 Inquire about </span>
                                            <span class="span3">120 branch </span>
                                        <li>
                                    </ul>
                                </div>
                            </div>
                        </div>

css

<style type="text/css">
           

            .test001 {
    
                width: 100%;
                border-top: 1px solid black;
                border-bottom: 1px solid black;
                text-align: center;
                font-weight: bold;
                font-size: 17px;
                height: 70px;
                display: flex;
                justify-content: center;
                align-items: center;
            }

            .test002 {
    
                margin-top: 15px;
                width: 100%;
                text-align: center;
                font-weight: bold;
                font-size: 21px;
                display: flex;
                justify-content: center;
                align-items: center;
            }

            .test003 {
    
                margin-top: 15px;
                width: 100%;
                /* text-align: center; */
                /* font-weight: bold; */
                /* font-size: 21px; */
                display: flex;
                justify-content: center;
                /* border: solid 1px; */
                flex-direction: column;
                align-items: center;
            }

            .test004 {
    
                /* margin-top: 15px; */
                width: 90%;
                /* text-align: center; */
                /* font-weight: bold; */
                /* font-size: 21px; */
                display: flex;
                justify-content: center;
                border: solid 1px;
                flex-direction: column;
                align-items: center;
            }

            .testTop {
    
                width: 90%;
                font-size: 14px;
                height: 30px;
                display: block;
                font-weight: bold;
                padding-left: 20px;
                padding-top: 15px;
            }

            .testTop span {
    
                margin-right: 75px;
            }

            .testTop .span2 {
    
                margin-right: 65px;
            }

            #box {
    
                width: 90%;
                height: 250px;
                line-height: 2em;
                /* background-color: skyblue; */
                margin-top: 15px;
                /* margin: 100px auto; */
                padding: 0 0px;
                overflow: hidden;
            }

            #list li {
    
                margin-top: 10px;
                list-style: none;
            }

            #list span {
    
                margin-right: 30px;
                font-size: 14px;
                display: inline-block;
                overflow: hidden;
                text-align: center;

            }

            #list .span1 {
    
                width: 80px;
            }

            #list .span2 {
    
                margin-right: 40px;
                width: 80px;

            }

            #list .span3 {
    
                width: 50px;

                /* margin-right: 50px; */
                /* text-align: left; */
                /* border: 1px solid black; */
            }


            /* #list a:hover { color: orangered; text-decoration: underline; } */
        </style>

js

<script>
        var box = document.getElementById('box')
        var list = document.getElementById('list')
        console.log(box, 'box')
        // Copy the document again 
        var content = list.innerHTML;
        list.innerHTML += content;

        var time = 30;
        var timer = setInterval(up, time);

        function up() {
    
            // Roll up more than ul Half the height of the content , Reset height  0
            if (box.scrollTop > (list.offsetHeight >> 1)) {
    
                box.scrollTop = 0
            } else {
    
                box.scrollTop++;
            }
        }
        // Mouse in pause -- Clear timer 
        // box.onmouseover = function () {
    
        // clearInterval(timer)

        // }
        /// Move the mouse out and continue -- Start timer 
        box.onmouseout = function() {
    
            timer = setInterval(up, time);
        }
    </script>