好看的el-scrollbar样式

原创已于 2024-04-08 11:38:39 修改 · 1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

于 2023-09-07 17:32:32 首次发布

本文详细介绍了如何使用CSS针对Webkit浏览器（如Chrome和Safari）修改滚动条的样式，包括整体宽度、滑块、轨道、箭头和特定方向的滚动条。并提供了el-table组件中滚动条样式的具体实现和调整技巧。

el-scollbar样式修改

1、滚动条整体部分

使用 ::-webkit-scrollbar


::-webkit-scrollbar {
    width: 10px;//修改滚动条宽度
}

2、滚动条中的滑块

使用 ::-webkit-scrollbar-thumb

::-webkit-scrollbar-thumb {
     border-radius: 8px;
       background: #d2eafb;
}

3、滚动条中的外层轨道

使用 ::-webkit-scrollbar-track

::-webkit-scrollbar-track {
    border-radius: 8px;
    background: #eeeeee;
}

4、滚动条中的两端箭头按钮

使用 ::-webkit-scrollbar-button

::-webkit-scrollbar-button {
    background: #eeeeee;
}

5、水平方向和垂直方向滚动条交接处

使用 ::-webkit-scrollbar-corner

::-webkit-scrollbar-corner {
    background-color: transparent;
}

6、单独设置水平方向或垂直方向滚动条样式

水平方向上的滚动条：:horizontal
垂直方向上的滚动条：:vertical

//水平方向滚动条
::-webkit-scrollbar:horizontal {
    width: 10px;
}
//垂直方向滚动条
::-webkit-scrollbar:vertical {
    width: 20px;
}

隐藏滚动条

.workbench-create {
  height: 100%;
  display: flex;
 
  .left-wrap {
    height: 100%;
    overflow: auto;
    flex: 1;
    padding-left: 40px;
    //隐藏元素的滚动条。这通常用于自定义滚动条样式。
    scrollbar-width: none;
    /* Firefox */
    -ms-overflow-style: none;
 
    /* IE 10+ */
    &::-webkit-scrollbar {
    //伪元素选择器，用于选择Webkit浏览器（如Chrome、Safari等）中的滚动条。
      display: none;
      /* Chrome Safari */
    }
 
  .right-wrap {
    height: 100%;
    width: 200px;
    padding-top: 40px;
    padding-right: 40px;
    margin-left: auto;
  }
}

<1>

/* 设置滚动条的样式 */
    .el-table__body-wrapper::-webkit-scrollbar {
        width: 8px;
        height: 8px;
    }
    
    /* 滚动条滑块 */
    .el-table__body-wrapper::-webkit-scrollbar-thumb {
        border-radius: 4px;
        background: rgba(0,0,0,.1);
        cursor: pointer;
    }
   
    .el-table__body-wrapper::-webkit-scrollbar-thumb:window-inactive {
        background: rgba(0,0,0,.1);
    }
     // 处理有x滚动条时高度遮挡滚动条
    .el-table--scrollable-x {
        .el-table__fixed,.el-table__fixed-right {
            height: calc(100% - 8px) !important;    
        }
    }
    // 存在滚动条的时候在right
    .el-table--scrollable-y {
        .el-table__fixed-right {
            right: 8px !important; 
        }
    }
    // 解决修改滚动条底部不对齐问题
    .el-scrollbar__wrap::-webkit-scrollbar {
        width: 8px; 
        height: 8px; 
    }

<2>

   .el-table .el-table__body-wrapper::-webkit-scrollbar {
        width: 5px;
        /*滚动条宽度*/
        height: 5px;
        /*滚动条高度*/
    }

    /*定义滚动条轨道 内阴影+圆角*/
    // .el-table .el-table__body-wrapper::-webkit-scrollbar-track {
    ::-webkit-scrollbar-track {
        box-shadow: 0px 1px 3px #1F2D3D inset;
        /*滚动条的背景区域的内阴影*/
        border-radius: 10px;
        /*滚动条的背景区域的圆角*/
        background-color: #1F2D3D;
        /*滚动条的背景颜色*/
    }

    /*定义滑块 内阴影+圆角*/
    // .el-table .el-table__body-wrapper::-webkit-scrollbar-thumb {
    ::-webkit-scrollbar-thumb {
        box-shadow: 0px 1px 3px #00a0e9 inset;
        /*滚动条的内阴影*/
        border-radius: 10px;
        /*滚动条的圆角*/
        background-color: #00a0e9;
        /*滚动条的背景颜色*/
    }