纯CSS实现ElementPlus框架Table组件横向上下双滚动条

直接看代码

废话不多说，直接看代码

.double-scroll-table{
  .el-scrollbar__wrap{
    border-top:var(--el-table-border) !important;
    position: relative !important;
    z-index: 100 !important;
    margin: 10px 0px !important;
  }
  .el-scrollbar__bar.is-horizontal {
    height: 100% !important;
    z-index: 0 !important;
    position: absolute !important;
    top: 0 !important;
    .el-scrollbar__thumb{
      border-radius: 0 !important;
      background-color: #fff !important;
      box-sizing: border-box !important;
      border-top: 10px solid rgb(229 229 229);
      border-bottom: 10px solid rgb(229 229 229);
      opacity: 1 !important;
    }
  }
  &:before{
    z-index: 300 !important; // 主要是为了保证左右两边的边框不被内容区域覆盖
  }
  &:after{
    z-index: 300 !important;
  }
}

然后直接给需要的table加上 double-scroll-table class 名称, 就可以了。也来看看效果吧：

整体思路

整个table组件中包含了三个模块：内容区、横向滚动条、纵向滚动条。由于只有一条横向滚动条，内容区域的横向滚动全部都由横向滚动条控制。

不得不说，element-plus的table组件这样的设计其实还是相当美观的。整个界面简洁大方。

但是我们的产品团队提出： 上下双滚动条对用户来说更加友好，可以随时拖动左右查看内容balabala，目前的滚动条太细不好查看balabala。

因此我们才有了这个上下双滚动条的需求需要去实现。

一开始查了一下资料，都没有找到更好的实现方案。有个博主甚至自己写了一个div，定位到table组件上，然后通过监听div的滚动去控制真正滚动条的滚动。

看完这个思路我就直接否定了这个想法，主要有两点不太好：

1. 实现复杂，工作量大
2. 项目中运用到的table组件越多，这个方案的替换成本就越高

因此我开始思考用自己的方式实现：

把横向滚动条定位到top，高度设置成百分百。将内容区保持static定位，给一个上下10px的边距，留给横向滚动条。

如下图所示，也就是绿色框住的是滚动条，红色的内容区通过设置z-index，位于绿框的上面。然后给滚动条内的el-scrollbar__thumb组件设置白色背景色，以及上下10px的边框，实现滚动条的效果。

写在最后

有些时候很复杂的问题，换一个思路可能就会变得很简单。希望本文对你有所帮助~