elementui的table组件滚动条怎么换成他们自己的滚动条样式?

最近要用到element里面table组件的固定表头,表格内容滚动的功能,如图:

clipboard.png

这滚动条实在是太丑了,element虽然官网没说,但是人家是有自己的滚动条组件的,而且我也在用,如图:

clipboard.png

现在的问题是涉及到table组件内部更换滚动条样式,小弟实在是不会,有大佬给解决一下吗,或者element为什么不把table组件的滚动条换成他们设计的美美的滚动条呢?实在是不解!

阅读 9.7k
评论
    6 个回答
    • 2.8k
    /*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/  
    ::-webkit-scrollbar  
    {  
        width: 16px;  /*滚动条宽度*/
        height: 16px;  /*滚动条高度*/
    }  
      
    /*定义滚动条轨道 内阴影+圆角*/  
    ::-webkit-scrollbar-track  
    {  
        -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);  
        border-radius: 10px;  /*滚动条的背景区域的圆角*/
        background-color: red;/*滚动条的背景颜色*/  
    }  
      
    /*定义滑块 内阴影+圆角*/  
    ::-webkit-scrollbar-thumb  
    {  
        border-radius: 10px;  /*滚动条的圆角*/
        -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);  
        background-color: green;  /*滚动条的背景颜色*/
    }
    

    这是内核为webkit的滚动条样式改变写法,如果是火狐则是-moz-,如果想兼容所有浏览器,参考这篇文章

      相似问题
      推荐文章