React学习系列(五)：antd React 表格横向滚动条隐藏 悬浮显示

需求:表格操作，类似想要antd table 中虚拟列表 滚动条效果。 默认不显示，鼠标hover在表格中的时候显示滚动条，离开又隐藏滚动条

1.笨办法：操作dom

     // 控制滚动条样式
  useEffect(() => {
    const myDiv: any = document.getElementById('mytable')
    // const scroll: any = document.getElementById('mytable')?.getElementsByClassName('pms-table-content')
    // scroll[0].style.overflow = 'hidden hidden'

    // 鼠标进入时触发
    myDiv?.addEventListener('mouseover', function () {
      console.log('鼠标进入')
      const scroll: any = document.getElementById('mytable')?.getElementsByClassName('pms-table-content')
      scroll[0].style.overflow = 'auto hidden'
    })

    // 鼠标离开时触发
    myDiv?.addEventListener('mouseout', function () {
      console.log('鼠标离开')
      const scroll: any = document.getElementById('mytable')?.getElementsByClassName('pms-table-content')
      scroll[0].style.overflow = 'hidden hidden'
    })
  }, [])
  
 <div id="mytable"><Table {...}></Table></div>

2.设置css样式控制

.mytable:hover {
  ::-webkit-scrollbar-thumb:horizontal {
    display: unset;
  }
}
.mytable {
  ::-webkit-scrollbar-thumb:horizontal {
    display: none;
  }
}