js实现自动滚动效果

js实现自动滚动效果

表格滚动效果

结构和样式

<div>
    <div id="wrappers" style=" overflow:hidden;max-height:90% ">
                 <div id="list_ones">
                    <ul  v-for="item in tableData" :key="item.id"  style="width:100%; display:flex;justify-content:space-between;color:#fff;margin-bottom:10px;padding-bottom:5px;border-bottom:1px solid #8080ff;cursor: pointer;">
                      <li>{{item.name}}</li>
                      <li>{{item.address}}</li>
                      <li>{{item.date}}</li>
                    </ul>
                  </div>
                 <div id="list_twos"></div>
               </div>
</div>

 scrolls() {
            let speeds = 100;
            let wrappers = document.getElementById('wrappers');
            let list_ones = document.getElementById('list_ones');
            let list_twos = document.getElementById('list_twos');
            list_twos.innerHTML = list_ones.innerHTML;
            function Marquees() {
            if (list_twos.offsetHeight - wrappers.scrollTop <= 0)
                wrappers.scrollTop -= list_ones.offsetHeight;
            else {
                wrappers.scrollTop += 1
            }
            }
            let MyMars = setInterval(Marquees, speeds);
            wrappers.onmouseover = function () {clearInterval(MyMars)};
            wrappers.onmouseout = function () {MyMars = setInterval(Marquees, speeds)};
        }
    }

列表滚动

      <div class="big_box_div"  id="wrapper">
        <div id="list_one">
            <div   v-for="item in list" :key="item.id" class="item_box">
                <div >
                    <div class="item_box_t">{{item.name}}</div>
                    <div>颗粒物：{{item.number}} PM</div>
                </div>
                <div>{{item.time}}</div>
            </div>
        </div>
         <div id="list_two"></div>
        </div>

js逻辑是一样的