最近一个需求中，要求当内容超出边界时，使用滚动条。好家伙，我这第一反应，不就是设置一下overflow-y:scroll就行了，可到实际操作中。我发现果然我这个菜鸟的想法就是简单，一大个滚动条在页面上显示的是真难看。故也是写个博客记录一下自己对滚动条样式的学习。
一、CSS滚动条选择器
::-webkit-scrollbar——整个滚动条。::-webkit-scrollbar-button——滚动条上的按钮（上下箭头）。::-webkit-scrollbar-thumb——滚动条上的滚动滑块。::-webkit-scrollbar-track——滚动条轨道。::-webkit-scrollbar-track-piece——滚动条没有滑块的轨道部分。::-webkit-scrollbar-corner——当同时有垂直滚动条和水平滚动条时交汇的部分。通常是浏览器窗口的右下角。::-webkit-resizer——出现在某些元素底角的可拖动调整大小的滑块。
注意：以上选择器仅在基于Blink和Webkit内核的浏览器上可用
二、相关示例
以下示例均基于该页面：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.test {
width: 200px;
height: 200px;
padding: 0 20px;
border: 2px solid beige;
border-radius: 5px;
overflow-y: scroll;
}
</style>
</head>
<body>
<div class="test">
1<br />2<br />3<br />4<br />5<br />6<br />7<br />8<br />9<br />10<br />
11<br />12<br />13<br />14<br />15<br />16<br />
</div>
</body>
</html>
2.1 ::-webkit-scrollbar
对于整个滚动条我们通常会设置width、background-color、border-radius三个属性
.test::-webkit-scrollbar {
width: 10px;
background-color: cornflowerblue;
border-radius: 5px;
}
一旦设置了该属性，就会改变整个滚动条的样式，滑块和上下箭头的样式需要通过::-webkit-scrollbar-thumb和::-webkit-scrollbar-button去设置。
2.2 ::-webkit-scrollbar-button
该选择器用于设置滚动条两端按钮的样式。
.test::-webkit-scrollbar-button {
height: 10px;
background-color: black;
}
2.3 webkit-scrollbar-thumb
.test::-webkit-scrollbar-thumb {
background-color: black;
border-radius: 5px;
}
2.4 ::-webkit-scrollbar-track
.test::-webkit-scrollbar-thumb {
background-color: hotpink;
border-radius: 5px;
}
.test::-webkit-scrollbar-track {
background-color: black;
border-radius: 5px;
}
