vue实现自动滚动，鼠标移入后暂停，移出继续滚动

slom_fxt

已于 2024-04-10 17:30:23 修改

阅读量501

点赞数 1

分类专栏：工作中的积累文章标签： vue.js jquery 前端

于 2023-08-07 13:41:47 首次发布

本文链接：https://blog.csdn.net/slom_fxt/article/details/132143406

版权

工作中的积累专栏收录该内容

22 篇文章 3 订阅

订阅专栏

html:

 <div class="mb3">
                <table>
                    <thead>
                        <tr>
                            <th>序号</th>
                            <th>预警内容</th>
                            <th>发现时间</th>
                            <th>状态</th>
                        </tr>
                    </thead>
                    <tbody ref="bodyel" @mouseover="gdonMouseOver" @mouseout="gdmouseout">
                        <tr>
                            <td>1</td>
                            <td>外高桥保税区南块微电子产业基地D-1街坊D1-15地块配套幼儿园</td>
                            <td>2023-05-08</td>
                            <td>办结</td>
                        </tr>
                        <tr>
                            <td>2</td>
                            <td>外高桥保税区南块微电子产业基地D-1街坊D1-15地块配套幼儿园</td>
                            <td>2023-05-08</td>
                            <td>办结</td>
                        </tr>
                        <tr>
                            <td>3</td>
                            <td>外高桥保税区南块微电子产业基地D-1街坊D1-15地块配套幼儿园</td>
                            <td>2023-05-08</td>
                            <td>办结</td>
                        </tr>
                        <tr>
                            <td>4</td>
                            <td>外高桥保税区南块微电子产业基地D-1街坊D1-15地块配套幼儿园</td>
                            <td>2023-05-08</td>
                            <td>办结</td>
                        </tr>
                        <tr>
                            <td>5</td>
                            <td>外高桥保税区南块微电子产业基地D-1街坊D1-15地块配套幼儿园</td>
                            <td>2023-05-08</td>
                            <td>办结</td>
                        </tr>
                    </tbody>
                </table>
            </div>

vue:

//表格的自动滚动
gdScroll() {
   let bodyel=this.$refs.bodyel
    //计时器对象
   this.secInterValId = setInterval(() => {
   var scrollHeight = bodyel.scrollHeight;
   var scrollTop = bodyel.scrollTop;
   var height = bodyel.offsetHeight;
      if (scrollTop == 0) {
          bodyel.scrollTop++
       }
      if ((scrollTop + height) == scrollHeight) {
         // clearInterval(this.secInterValId);//关闭循环
         bodyel.scrollTop=0

       } else {
          bodyel.scrollTop++ // 元素自增距离顶
       }

        }, 100)
 },
//监听表格的鼠标移入事件
gdonMouseOver(){
   clearInterval(this.secInterValId);//关闭循环
},
gdmouseout(){
    this.gdScroll()
}