关于滚动条样式

 

美化滚动条样式，主要涉及以下几个伪元素属性（注，这里以chrome浏览器作示例）

::-webkit-scrollbar

 

用于设置滚动条的整体样式

在这里设置宽高，以控制滚动条尺寸，且必须要设置宽高，否则不生效

宽高分别对应 y轴 和 x轴 的滚动条尺寸

若宽高为0，则可隐藏滚动条，但仍可保持滚动 

  

::-webkit-scrollbar-track

滚动条轨道
不设置则不出现轨道

 

::-webkit-scrollbar-track-piece

没有滑块的滚动条轨道，或者说是内层轨道
同滚动条轨道

 

::-webkit-scrollbar-thumb

滚动条滑块，即滚动条滚动的部分
必须要设置，否则不会出现滑块

 

::-webkit-scrollbar-button

滚动条两端的箭头按钮
不设置则不出现

 

::-webkit-scrollbar-corner

X轴滚动条和Y轴滚动条的交接处
不设置，默认为白色小方块，宽高随X轴和Y轴滚动条尺寸

 

 

 

 

 

 

 

/* 滚动条所在容器 */
.scroll-container {
    margin: 10px;
    width: 500px;
    height: 150px;
    overflow: overlay;
    background-color: #eee;
    white-space: nowrap;
}

/* 滚动条整体 */
.scroll-container::-webkit-scrollbar {
    height: 20px;
    width: 20;
}
/* 两个滚动条交接处 -- x轴和y轴 */
.scroll-container::-webkit-scrollbar-corner {
    background-color: transparent;
}

/* 滚动条滑块 */
.scroll-container::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    background: #535353;
}

/* 滚动条轨道 */
.scroll-container::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    background: #ededed;
}

/* 滚动条两端按钮 */
.scroll-container::-webkit-scrollbar-button {
} 

 

 

 分别设置水平和垂直方向上的滚动条

 

:horizontal：适用于任何水平方向上的滚动条

:vertical：适用于任何垂直方向的滚动条

 

::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    background: #eee;
    // 添加 horizonal ，单独设置水平方向上的 轨道
    &:horizontal {
        background-color: blue;
    }
}
::-webkit-scrollbar-thumb {
    border-radius: 10px;
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    background: #535353;
    // 添加 vertical ，单独设置垂直方向上的 滑块
    &:vertical {
        background-color: red;
    }
}
 

 

 

 

 

 

本文参照

作者：Composition
链接：https://juejin.cn/post/6997011443967066143