el-table，鼠标悬浮显示滚动条

月白还

已于 2022-06-23 15:40:22 修改

阅读量1k

点赞数 1

文章标签： html elementui css

于 2022-06-23 11:24:56 首次发布

本文链接：https://blog.csdn.net/weixin_47683025/article/details/125423477

版权

亲测有效，话不多说，上代码

@mixin elScoll {
  /*隐藏滚动条，当IE下溢出，仍然可以滚动*/
  -ms-overflow-style: scrollbar;
  scrollbar-arrow-color: #fff;
  scrollbar-face-color: rgb(224, 224, 224);
  scrollbar-3dlight-color: #fff;
  scrollbar-highlight-color: #fff;
  scrollbar-shadow-color: #fff;
  scrollbar-darkshadow-color: #fff;
  scrollbar-track-color: #fff;
  scrollbar-base-color: #fff;

  //debkit浏览器
  ::-webkit-scrollbar {
    width: 15px;
    height: 15px;
    border-radius: 15px;
    background-color: transparent;
  }

  :hover::-webkit-scrollbar {   
    width: 15px;
    height: 15px;
  }

  // 定义滚动条轨道 内阴影+圆角
  ::-webkit-scrollbar-track {
    border-radius: 15px;
  }

  :hover::-webkit-scrollbar-track {
    border-radius: 15px;
    background-color: transparent;
  }

  // 定义滑块 内阴影+圆角
  ::-webkit-scrollbar-thumb {
    background-color: transparent;
  }
   // 鼠标悬浮样式
  :hover::-webkit-scrollbar-thumb {
    border-radius: 15px;
    background-color: #9fb3ca;
  }
}