vue+element 自动循环滚动列表

核心代码：

 <div style="height: 10%;padding: 2%"><img src="imgs/right_icon_map_sel2.png"
                                                  style="width: 21px;    vertical-align: middle;"><span
                class="tit">实时动态</span></div>
        <div ref="message" class="messages">
            <div ref="infobord1" v-for="item in timelineData" :key="item.time">
                   <div style="display: flex">
                        <p >{{item.time}}</p>
                        <p >{{item.type}}</p>
                   </div>
                   <p>{{item.name}}</p>
            </div>
        </div>

rollText: function() {
    var speed = 30; //滚动速度
    var that = this;
    function Marquee() {
        var div = document.getElementsByClassName("messages")[0];
        //当滑动到最底部时  自动回到顶部
        if (that.message.scrollTop == (div.scrollHeight-div.clientHeight)) {
            that.message.scrollTop = 0;
        } else {
            that.message.scrollTop++;
            // console.log(that.message.scrollTop);
            // console.log(that.infobord1.offsetTop);
        }
    }
    var MyMar = setInterval(Marquee, speed); //设置定时器
    //鼠标移上时清除定时器达到滚动停止的目的

    this.message.addEventListener("mouseover", function() {
        clearInterval(MyMar);
    });
    //鼠标移开时重设定时器
    this.message.addEventListener("mouseout", function() {
        MyMar = setInterval(Marquee, speed);
    });
}

/*动态滚动事件列表*/

.messages {
    position: relative;
    width: 90%;
    margin: 1% 5%;
    height: 90%;
    overflow: auto;
}

 原理就是控制滚动条的定时移动