vue+element ui表格滚动条和布局滚动条

最新推荐文章于 2024-06-17 02:28:22 发布

——周彤——

最新推荐文章于 2024-06-17 02:28:22 发布

阅读量500

点赞数

分类专栏： vue vue-cli 文章标签：大数据

本文链接：https://blog.csdn.net/Zt0118/article/details/125605106

版权

vue 同时被 2 个专栏收录

19 篇文章 0 订阅

订阅专栏

vue-cli

5 篇文章 0 订阅

订阅专栏

1.表格滚动条

 /*滚动条的宽度*/
  /deep/ .el-table__body-wrapper::-webkit-scrollbar {
    width: 10px;
    height: 10px;
  }
  /*滚动条滑块*/
  /deep/ .el-table__body-wrapper::-webkit-scrollbar-thumb {
    background-color:  rgba(40, 186, 38, 1);
        border-radius: 100% !important;
    border-radius: 12px !important;

  }
/deep/::-webkit-scrollbar-track {
  /*滚动条里面轨道*/
  -webkit-box-shadow: inset 0 0 5px rgba(40, 186, 38, 1);
  border-radius: 12px;
  background: rgba(40, 186, 38, .2);
}

2.布局

::-webkit-scrollbar {
  /*滚动条整体样式*/

  max-width: 8px; /*高宽分别对应横竖滚动条的尺寸*/

  max-height: 8px;
}

::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/

  border-radius: 10px;

  // -webkit-box-shadow: inset 0 0 5px #38b2ff;

  background: rgba(40, 186, 38, 1);
}

::-webkit-scrollbar-track {
  /*滚动条里面轨道*/

  -webkit-box-shadow: inset 0 0 5px rgba(40, 186, 38, 1);

  border-radius: 10px;

  background: rgba(40, 186, 38, .2);
}