element table表格滚动条

  • Post author:
  • Post category:其他




项目场景:

table表头过长需要添加滚动条




问题描述+原因

一般情况表头过长,会自动出现滚动条,但是在大型项目开发过程中,有的情况会在总的母版文件中设置禁用滚动条,所以当需要滚动条时,找不到。




解决方案:

添加css样式 display:block;

/deep/::-webkit-scrollbar{
    display:block!important;
    height:6px;
    width:6px;
    background-color:#ddd;
}

===================================补充================================

修改滚动条样式

 .innerbox::-webkit-scrollbar {
            width: 4px;    
            /*height: 4px;*/
 }
 .innerbox::-webkit-scrollbar-thumb {
      border-radius: 10px;
     -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
      background: rgba(0,0,0,0.2);
   }
 .innerbox::-webkit-scrollbar-track {
     -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
     border-radius: 0;
     background: rgba(0,0,0,0.1);

  }

:-webkit-scrollbar 滚动条整体部分,可以设置宽度啥的

::-webkit-scrollbar-button 滚动条两端的按钮

::-webkit-scrollbar-

track

外层轨道

::-webkit-scrollbar-track-piece  内层滚动槽

::-webkit-scrollbar-

thumb

滚动的滑块

::-webkit-scrollbar-corner 边角

::-webkit-resizer 定义右下角拖动块的样式



版权声明:本文为weixin_67849181原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。