-webkit-scrollbar-track 伪元素
::-webkit-scrollbar-track表示滚动条的外层轨道，我们先给它增加以下 CSS 代码看看效果：
.rect::-webkit-scrollbar-track {
background-color: blue;
border: 5px solid orange;
margin: 30px;
}这里特地增加了 margin 外边距把 scrollbar 本身的背景色给透出来方便大家观察其位置：
上面的蓝色背景橙色边框区域就是外层轨道的，需要注意的是，这里无法单独对其设置 width 或 height 样式，它的宽高始终和 -webkit-scrollbar的宽高保持一致。既然是外层轨道，说明存在内层轨道，我们继续往下看：
-webkit-scrollbar-track-piece 伪元素
::-webkit-scrollbar-track-piece是滚动条的内层轨道，这个就有点意思了，为了看起来更有辨识度，我们用颜色区分出来：
.rect::-webkit-scrollbar-track-piece {
background-color: green;
border: 5px solid purple;
margin: 30px;
}细心的你可能已经发现了，这次的样式非常奇怪，因为中间有一道杠：
这是因为内层轨道其实是有两部分组成的，垂直滚动条的内层轨道被分为上下部分，水平滚动条的内层轨道被分为左右两部分，而每一部分都可以用 start或 end伪类来控制，例如设置不同的背景色：
/* 控制滚动区域的上/左半部分 */
.rect::-webkit-scrollbar-track-piece:start {
background-color: yellowgreen;
}
/* 控制滚动区域的下/右半部分 */
.rect::-webkit-scrollbar-track-piece:end {
background-color: greenyellow;
}通过设置背景色区分，可以看到更明显的看到上下/左右两部分的范围了：
-webkit-scrollbar-thumb 伪元素
::-webkit-scrollbar-thumb才是滚动条的滑块，也就是可拖动的部分，我们用下面的 CSS 把它展现出来：
.rect::-webkit-scrollbar-thumb {
background-color: rgba(128, 0, 128, 0.5);
border-radius: 30px;
}可以看到滚动滑块的中间恰好是内层轨道上下/左右两部分的交界处：
这里有一点需要特别注意，很多人想通过 width 来修改垂直滑块的宽度，或者通过 height 来修改水平滑块的高度，其实都是不可行的，因为它的宽高永远和 -webkit-scrollbar保持一致，那怎样从视觉上让其变得更窄一点呢？这里要用到 background-clip这个 CSS 属性：
background-clip 用于设置元素的背景（包括背景颜色或背景图片）是否延伸到边框、内边距盒子和内容盒子下面。
它可以有以下取值：
background-clip: border-box：背景延伸至 border 外沿 background-clip: padding-box：背景延伸至 padding 外沿 background-clip: content-box：背景延伸至 content 外沿 background-clip: text：背景剪裁成文字的前景色
我们给滚动滑块设置边框透明和背景范围：
.rect::-webkit-scrollbar-thumb {
background-color: rgba(128, 0, 128, 0.5);
border-radius: 30px;
border: 15px solid transparent; /* 设置边距透明 */
background-clip: padding-box; /* 设置背景范围 */
}本文地址：IT百科频道 https://www.hkm168.com/tags/903190_2.html，易企推百科一个免费的知识分享平台，本站部分文章来网络分享，本着互联网分享的精神，如有涉及到您的权益，请联系我们删除，谢谢！
相关阅读
