table表格超出高度自动滚动

淋雪小新

已于 2023-04-17 17:26:20 修改

阅读量1.7k

点赞数

分类专栏： vue 前端文章标签：前端 javascript html

于 2021-12-13 17:36:39 首次发布

本文链接：https://blog.csdn.net/zxl_start/article/details/121910512

版权

前端同时被 2 个专栏收录

59 篇文章 2 订阅

订阅专栏

vue

57 篇文章 0 订阅

订阅专栏

本文介绍如何使用JavaScript实现在页面上超出高度时的自动滚动功能，通过`setInterval`定时器控制滚动条位置，并结合鼠标over/out事件处理，确保流畅交互。着重讲解了`tableInfo`方法和事件监听器的使用。

摘要由CSDN通过智能技术生成

超出高度滚动

<div class="response_action response_action_scroll" @mouseover="mouseOverHandler" @mouseout="mouseoutHandler">
          // 内容区
 </div>
 data() {
    return {
      activeInterval: null,
      netCarCurrentScollTop: 0,
}
}
，
 beforeDestroy () {
    this.activeInterval && clearInterval(this.activeInterval )
  }，
methods: {
   // 自动滚动
    tableInfo: function() {
      this.activeInterval && clearInterval(this.activeInterval)
      let alarmInfoDom = document.getElementsByClassName('response_action_scroll')[0]
      if (alarmInfoDom) {
        this.activeInterval = setInterval(() => {
          alarmInfoDom.scrollTop = this.netCarCurrentScollTop
          // 到达底部判断
          if (alarmInfoDom.scrollTop >= alarmInfoDom.scrollHeight - alarmInfoDom.offsetHeight) {
            alarmInfoDom.scrollTop = 0
          } else {
            alarmInfoDom.scrollTop += 2
          }
          this.netCarCurrentScollTop = alarmInfoDom.scrollTop
        }, 160)
      }
    },
    mouseOverHandler() {
      this.activeInterval && clearInterval(this.activeInterval)
    },
    mouseoutHandler() {
      this.tableInfo()
    }
}