原生table实现轮询+css修改默认滚动条样式

最近做项目(vue系列)遇到两个需求，这里做一个记录，分享给大家。

原生Table列表实现轮询

需求：

1. 当table列表数量较少时不轮询，超过一定高度才轮询；
2. 鼠标移入暂停轮询，移出继续轮询

首先，原型图长下面这样：

右下角有个分页，用的是elementUI的分页组件，改了下样式，主体就是一个原生table
轮询有好几种实现方式，网上搜一搜很多，我这里使用js的方式实现，大概的思路就是：通过控制margin-top，比如margin-top=-1px,margin-top=-2px;margin-top=-3px;...,当这个值大于行高时，说明这条数据已经滚动完毕了，这时恢复margin-top=0,并且将它插入到tbody底部，从而实现轮询。直接上代码：

HTML

 

    

      
      
      

        

          

            

              
设备类型
              
设备大类
              
设备编号
              
设备位置
              
任务延时
              
设备状态
              
任务完成进度
              
任务开始时间
              
任务结束时间
              
任务时长
            
          
        
        

          

            

              

                
{{si.name || '-'}}
                
{{si.type || '-'}}
                

                  {{si.deviceCode || '-'}}
                
                
{{si.posistion || '-'}}
                
{{Number(si.delayedTime)+'ms'}}
                
{{si.delayedTime || '-'}}
                
{{deviceStateArr[si.sysState] || '-'}}
                

                  
                
                
{{si.progress || '-'}}
                
{{si.workStartTime || '-'}}
                
{{si.workEndTime || '-'}}
                
{{si.duration}}
              
            
          
        
      
      

        
      
    
  

CSS

JS

table轮询的方法：

methods: {
    activeEve(val) {
      this.scroll = val 
      const self = this,
        wrapH = this.$refs.scrollBox.clientHeight,
        sel = this.$refs.scroll,
        tbody = sel.children[0],
        tbodyH = tbody.clientHeight
      let timer_s = null,
        step = 0

      if (this.scroll && tbodyH > wrapH) {
        if (self.timer) clearTimeout(self.timer)
        cycle()
      } else {
        if (self.timer) clearTimeout(self.timer)
      }

      function cycle() {
        if (self.timer) clearTimeout(self.timer)
        self.timer = setTimeout(function() {
          scroll()
        }, 2000)
      }

      function scroll() {
        cancelAnimationFrame(timer_s)
        timer_s = requestAnimationFrame(function fn() {
          if (!tbody.children || !tbody.children.length) return
          const trH = tbody.children[0].clientHeight
          if (Math.abs(step) > trH) {
            cancelAnimationFrame(timer_s)
            step = 0
            sel.style.marginTop = 0
            tbody.appendChild(tbody.firstChild)
            cycle()
          } else {
            step--
            sel.style.marginTop = `${step}px`
            timer_s = requestAnimationFrame(fn)
          }
        })
      }
    }
  }

至此，table轮询功能已经实现。
过了一段时间，老大又说先不用轮询，用滚动条代替。

css修改默认滚动条样式

在原来的基础上，只需要一点小改动就可以实现，下面是css实现：

css

.scroll-box {
  width: 100%;
  height: 510px;
  overflow: hidden;
  overflow-y: scroll;
  position: relative;
  // 修改默认滚动条样式
  // 修改默认滚动条样式
  &::-webkit-scrollbar {/*滚动条整体样式*/
    width: 6px;         /*高宽分别对应横竖滚动条的尺寸*/
    height: 6px;
    background: transparent;
  }

  &::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
    background: transparent;
    border-radius: 4px;
  }

  &:hover::-webkit-scrollbar-thumb {
    background: hsla(0, 0%, 53%, 0.4);
  }

  &:hover::-webkit-scrollbar-track {/*滚动条里面轨道*/
    background: hsla(0, 0%, 53%, 0.1);
  }
  // 如果需要轮询table，请注释掉上面的，放开下面的
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
}

好了，这样就可以了，鼠标移入的时候会出现，下面是效果：