表格滚动效果,此处使用的elementUI的table组件(自己写table标签同理)

表格内容自滚动效果

      // 拿到表格挂载后的真实DOM
      const table = this.$refs.table
      // 拿到表格中承载数据的div元素
      const divData = table.bodyWrapper
      // 拿到元素后,对元素进行定时增加距离顶部距离,实现滚动效果(此配置为每100毫秒移动1像素)
      this.timer2 = setInterval(() => {
        // 元素自增距离顶部1像素
        divData.scrollTop += 2
        // 判断元素是否滚动到底部(可视高度+距离顶部=整个高度)
        if (divData.clientHeight + divData.scrollTop >= divData.scrollHeight) {
          // 重置table距离顶部距离
          divData.scrollTop = 0
        }
      }, 100)

鼠标移入停止滚动

      divData.onmouseover = () => {
        clearInterval(this.timer2)
        this.timer2 = null
      }

鼠标移出继续滚动

      divData.onmouseout = () => {
        this.timer2 = setInterval(() => {
          // 元素自增距离顶部1像素
          divData.scrollTop += 2
          // 判断元素是否滚动到底部(可视高度+距离顶部=整个高度)
          if (divData.clientHeight + divData.scrollTop >= divData.scrollHeight) {
            // 重置table距离顶部距离
            divData.scrollTop = 0
          }
        }, 100)
      }

需要在生命周期清除定时器,避免页面切换重复创建此定时器

    beforeDestroy() {
      clearInterval(this.timer2)
      this.timer2 = null
    },

 

posted @ 2022-01-10 10:43  又拿代码换酒钱  阅读(150)  评论(0编辑  收藏  举报