css 设置 overflow:scroll 滚动条样式详解

请注意，本教程内容仅对支持 WebKit 的浏览器（例如谷歌Chrome、微软新版Edge、苹果Safari等）有效。当然 2024 年的今天，绝大部分的现代浏览器都支持 WebKit 了。

可以使用的伪元素

::-webkit-scrollbar — 整个滚动条.
::-webkit-scrollbar-button — 滚动条上的按钮 (上下箭头).
::-webkit-scrollbar-track — 滚动条轨道.
::-webkit-scrollbar-track-piece — 滚动条没有滑块的轨道部分.
::-webkit-scrollbar-thumb — 滚动条上的滚动滑块.
::-webkit-scrollbar-corner — 当同时有垂直滚动条和水平滚动条时交汇的部分.
::-webkit-resizer — 某些元素的corner部分的部分样式(例:textarea的可拖动按钮).

更直观的图示

示例

<div class="box">
零五网 - 为热爱技术的人而生！网址：https://www.02405.com<br>
零五网 - 为热爱技术的人而生！网址：https://www.02405.com<br>
零五网 - 为热爱技术的人而生！网址：https://www.02405.com<br>
零五网 - 为热爱技术的人而生！网址：https://www.02405.com<br>
零五网 - 为热爱技术的人而生！网址：https://www.02405.com<br>
零五网 - 为热爱技术的人而生！网址：https://www.02405.com<br>
零五网 - 为热爱技术的人而生！网址：https://www.02405.com<br>
零五网 - 为热爱技术的人而生！网址：https://www.02405.com<br>
零五网 - 为热爱技术的人而生！网址：https://www.02405.com<br>
零五网 - 为热爱技术的人而生！网址：https://www.02405.com<br>
零五网 - 为热爱技术的人而生！网址：https://www.02405.com<br>
零五网 - 为热爱技术的人而生！网址：https://www.02405.com<br>
零五网 - 为热爱技术的人而生！网址：https://www.02405.com<br>
零五网 - 为热爱技术的人而生！网址：https://www.02405.com<br>
零五网 - 为热爱技术的人而生！网址：https://www.02405.com<br>
零五网 - 为热爱技术的人而生！网址：https://www.02405.com<br>
零五网 - 为热爱技术的人而生！网址：https://www.02405.com<br>
零五网 - 为热爱技术的人而生！网址：https://www.02405.com<br>
</div>


.box{
    width:300px;
    height:200px;
    overflow:scroll;
}
.box::-webkit-scrollbar {
    width: 12px;
}
 
.box::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
    border-radius: 10px;
}
 
.box::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
}

这些伪元素还可以和伪类选择器组合使用，以实现更高级的效果。比如：

::-webkit-scrollbar-track-piece:start {
   /* Select the top half (or left half) or scrollbar track individually */
}

::-webkit-scrollbar-thumb:window-inactive {
   /* Select the thumb when the browser window isn't in focus */
}

::-webkit-scrollbar-button:horizontal:decrement:hover {
   /* Select the down or left scroll button when it's being hovered by the mouse */
}