滚动条基本样式设置

::-webkit-scrollbar 系列属性

• 详细使用说明 ::-webkit-scrollbar
• 注意：如果没有设置滚动溢出的相关属性，滚动条样式系列属性不会生效（resize 除外）。
• 属性
  • ::-webkit-scrollbar 整个滚动条。
  • ::-webkit-scrollbar-button 滚动条上的按钮（上下箭头）。
  • ::-webkit-scrollbar-thumb 滚动条上的滚动滑块。
  • ::-webkit-scrollbar-track 滚动条轨道。
  • ::-webkit-scrollbar-track-piece 滚动条没有滑块的轨道部分。
  • ::-webkit-scrollbar-corner 当同时有垂直滚动条和水平滚动条时交汇的部分。通常是浏览器窗口的右下角。
  • ::-webkit-resizer 出现在某些元素底角的可拖动调整大小的滑块。
• 注意：该系列属性在没有优先设置 ::-webkit-scrollbar 时，其他滚动条相关样式不会生效（resize 除外）。
• 常用：::-webkit-scrollbar、::-webkit-scrollbar-thumb、::-webkit-scrollbar-track（示例见“基本使用”）

属性使用示例

• 未使用该系列属性时的样式
  
• 后续设置比较强烈的颜色，易与区分属性生效的部分。
• ::-webkit-scrollbar 整个滚动条

<div>
     <div class="father">
         <div class="child">子元素，高度大于父元素，撑开父元素</div>
     </div>
</div>
<style>
.father {
    background: #eee;
    width: 400px;
    height: 600px;
    overflow-y: auto;
    margin: 50px auto;
}
.child {
    height: 700px;
    font-size: 20px;
    font-weight: bold;
}
::-webkit-scrollbar {
    /* 设置滚动条宽度 */
    width: 20px;
    /* 设置滚动条背景色 */
    background: blue;
}
</style>

• ::-webkit-scrollbar-button 滚动条上的按钮（上下箭头）

<div>
     <div class="father">
         <div class="child">子元素，高度大于父元素，撑开父元素</div>
     </div>
</div>
<style>
.father {
    background: #eee;
    width: 400px;
    height: 600px;
    overflow-y: auto;
    margin: 50px auto;
}
.child {
    height: 700px;
    font-size: 20px;
    font-weight: bold;
}
::-webkit-scrollbar {
    /* 设置滚动条宽度 */
    width: 20px;
    /* 设置滚动条背景色 */
    background: blue;
}
::-webkit-scrollbar-button {
	/* 滚动条上下箭头的颜色 */
    background: yellow;
}
</style>

• ::-webkit-scrollbar-thumb 滚动条上的滚动滑块

<div>
     <div class="father">
         <div class="child">子元素，高度大于父元素，撑开父元素</div>
     </div>
</div>
<style>
.father {
    background: #eee;
    width: 400px;
    height: 600px;
    overflow-y: auto;
    margin: 50px auto;
}
.child {
    height: 700px;
    font-size: 20px;
    font-weight: bold;
}
::-webkit-scrollbar {
    /* 设置滚动条宽度 */
    width: 20px;
    /* 设置滚动条背景色 */
    background: blue;
}
::-webkit-scrollbar-button {
    /* 滚动条上下箭头的颜色 */
    background: yellow;
}
::-webkit-scrollbar-thumb {
    /* 滚动条滑块圆角 */
    border-radius: 8px;
    /* 滚动条滑块背景色 */
    background: skyblue;
}
</style>

• ::-webkit-scrollbar-track 滚动条轨道

<div>
     <div class="father">
         <div class="child">子元素，高度大于父元素，撑开父元素</div>
     </div>
</div>
<style>
.father {
    background: #eee;
    width: 400px;
    height: 600px;
    overflow-y: auto;
    margin: 50px auto;
}
.child {
    height: 700px;
    font-size: 20px;
    font-weight: bold;
}
::-webkit-scrollbar {
    /* 设置滚动条宽度 */
    width: 20px;
    /* 设置滚动条背景色 */
    background: blue;
}
::-webkit-scrollbar-button {
    /* 滚动条上下箭头的颜色 */
    background: yellow;
}
::-webkit-scrollbar-thumb {
    /* 滚动条滑块圆角 */
    border-radius: 8px;
    /* 滚动条滑块背景色 */
    background: skyblue;
}
::-webkit-scrollbar-track {
    /* 滚动条轨道背景色 */
    background: orange;
    /* 滚动条轨道圆角 */
    border-radius: 10px;
}
</style>

• ::-webkit-scrollbar-track-piece 滚动条没有滑块的轨道部分

<div>
     <div class="father">
         <div class="child">子元素，高度大于父元素，撑开父元素</div>
     </div>
</div>
<style>
.father {
    background: #eee;
    width: 400px;
    height: 600px;
    overflow-y: auto;
    margin: 50px auto;
}
.child {
    height: 700px;
    font-size: 20px;
    font-weight: bold;
}
::-webkit-scrollbar {
    /* 设置滚动条宽度 */
    width: 20px;
    /* 设置滚动条背景色 */
    background: blue;
}
::-webkit-scrollbar-button {
    /* 滚动条上下箭头的颜色 */
    background: yellow;
}
::-webkit-scrollbar-thumb {
    /* 滚动条滑块圆角 */
    border-radius: 8px;
    /* 滚动条滑块背景色 */
    background: skyblue;
}
::-webkit-scrollbar-track {
    /* 滚动条轨道背景色 */
    background: orange;
    /* 滚动条轨道圆角 */
    border-radius: 10px;
}
::-webkit-scrollbar-track-piece {
    /* 滚动条轨道背景色 */
    /* 覆盖在轨道上方，黑色半透明与橙色叠加 */
    background: rgba(0, 0, 0, 0.3);
}
</style>

• ::-webkit-scrollbar-corner 当同时有垂直滚动条和水平滚动条时交汇的部分。通常是浏览器窗口的右下角

<div>
     <div class="father">
         <div class="child">子元素，高度大于父元素，撑开父元素</div>
     </div>
</div>
<style>
.father {
    background: #eee;
    width: 400px;
    height: 600px;
    overflow-y: auto;
    margin: 50px auto;
}
.child {
    height: 700px;
    width: 700px;
    font-size: 20px;
    font-weight: bold;
}
::-webkit-scrollbar {
    /* 设置滚动条宽度 */
    width: 20px;
    /* 设置滚动条背景色 */
    background: blue;
}
::-webkit-scrollbar-button {
    /* 滚动条上下箭头的颜色 */
    background: yellow;
}
::-webkit-scrollbar-thumb {
    /* 滚动条滑块圆角 */
    border-radius: 8px;
    /* 滚动条滑块高度 */
    height: 100px;
    /* 滚动条滑块背景色 */
    background: skyblue;
}
::-webkit-scrollbar-track {
    /* 滚动条轨道背景色 */
    background: orange;
    /* 滚动条轨道圆角 */
    border-radius: 10px;
}
::-webkit-scrollbar-track-piece {
    /* 滚动条轨道背景色 */
    /* 覆盖在轨道上方，黑色半透明与橙色叠加 */
    background: rgba(0, 0, 0, 0.3);
}
::-webkit-scrollbar-corner {
    /* 横向、纵向滚动条的交汇背景色 */
    background: red;
}
</style>

• ::-webkit-resizer 出现在某些元素底角的可拖动调整大小的滑块

<div>
     <div class="father">
         <div class="child">子元素，高度大于父元素，撑开父元素</div>
     </div>
</div>
<style>
.father {
    background: #eee;
    /* 原始宽度为 400px，下方图示为拖拽后的样式，明显比 400px 宽 */
    width: 400px;
    height: 600px;
    /* 设置不溢出，其他滚动条样式设置会失效 */
    overflow: hidden;
    /* 父元素设置可拖拽属性 */
    resize: horizontal;
    margin: 50px auto;
}
.child {
    height: 700px;
    width: 700px;
    font-size: 20px;
    font-weight: bold;
}
::-webkit-resizer {
    /* 设置右下角可拖拽部分的背景色 */
    background: rgba(0, 0, 0, 0.3);
}
</style>

基本应用

<div>
     <div class="father">
         <div class="child">子元素，高度大于父元素，撑开父元素</div>
     </div>
</div>
<style>
.father {
    background: #eee;
    width: 400px;
    height: 600px;
    overflow-y: auto;
    margin: 50px auto;
}
.child {
    height: 700px;
    font-size: 20px;
    font-weight: bold;
}
::-webkit-scrollbar {
    width: 5px;
    background: #eee;
}

::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(255, 255, 255, 0.3);
    border-radius: 3px;
}

::-webkit-scrollbar-thumb {
    border-radius: 3px;
    height: 100px;
    background-color: #ccc;
}
</style>

兼容性