在网页开发中，滚动条是常见的交互元素，默认滚动条样式往往和页面整体设计风格不匹配，同时部分场景下需要控制元素是否出现滚动条，这就需要用到css相关的滚动条属性来实现。
控制元素是否出现滚动条
要让元素出现滚动条，首先需要用到overflow属性，该属性用来控制元素内容溢出时的处理方式，常用取值如下：
- visible：默认值，内容溢出时会显示在元素外部
- hidden：内容溢出时会被裁剪，不显示滚动条
- scroll：无论内容是否溢出，都会显示滚动条
- auto：内容溢出时显示滚动条，不溢出时不显示
如果需要单独控制水平和垂直方向的滚动条，可以使用overflow-x和overflow-y属性，分别对应水平和垂直方向。
下面是一个让div元素内容溢出时出现滚动条的示例：
/* 设置div宽高，内容溢出时垂直方向出现滚动条 */
.scroll-box {
width: 300px;
height: 200px;
border: 1px solid #ccc;
overflow-y: auto;
}
自定义滚动条样式
自定义滚动条样式需要使用css伪元素，不同浏览器的伪元素前缀不同，目前主流的适配方案如下：
| 浏览器内核 | 伪元素前缀 |
|---|---|
| WebKit内核（Chrome、Edge、Safari等） | ::-webkit-scrollbar |
| Firefox | scrollbar-width、scrollbar-color |
WebKit内核浏览器自定义样式
WebKit内核的滚动条相关伪元素有很多，常用的几个如下：
::-webkit-scrollbar：整个滚动条::-webkit-scrollbar-thumb：滚动条上的滑块::-webkit-scrollbar-track：滚动条的轨道::-webkit-scrollbar-button：滚动条两端的按钮
下面是一个完整的WebKit内核下自定义滚动条样式的示例：
/* 整个滚动条宽度 */
.scroll-box::-webkit-scrollbar {
width: 8px;
}
/* 滚动条轨道 */
.scroll-box::-webkit-scrollbar-track {
background: #f1f1f1;
border-radius: 4px;
}
/* 滚动条滑块 */
.scroll-box::-webkit-scrollbar-thumb {
background: #888;
border-radius: 4px;
}
/* 滑块 hover 状态 */
.scroll-box::-webkit-scrollbar-thumb:hover {
background: #555;
}
Firefox浏览器自定义样式
Firefox使用两个属性来设置滚动条样式，不需要伪元素，语法更简单：
scrollbar-width：设置滚动条宽度，取值可以是auto、thin、nonescrollbar-color：设置滑块和轨道的颜色，第一个值是滑块颜色，第二个值是轨道颜色
Firefox自定义滚动条样式的示例：
/* Firefox下自定义滚动条，thin表示细滚动条，滑块颜色#888，轨道颜色#f1f1f1 */
.scroll-box {
scrollbar-width: thin;
scrollbar-color: #888 #f1f1f1;
}
完整使用示例
下面是一个同时适配WebKit内核和Firefox浏览器的完整滚动条使用示例，HTML和css代码如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>css滚动条示例</title>
<style>
.scroll-container {
width: 300px;
height: 200px;
border: 1px solid #ddd;
padding: 10px;
/* 控制滚动条显示 */
overflow-y: auto;
/* Firefox滚动条样式 */
scrollbar-width: thin;
scrollbar-color: #888 #f1f1f1;
}
/* WebKit内核滚动条样式 */
.scroll-container::-webkit-scrollbar {
width: 8px;
}
.scroll-container::-webkit-scrollbar-track {
background: #f1f1f1;
border-radius: 4px;
}
.scroll-container::-webkit-scrollbar-thumb {
background: #888;
border-radius: 4px;
}
.scroll-container::-webkit-scrollbar-thumb:hover {
background: #555;
}
.content {
height: 400px;
background: linear-gradient(#fff, #e6e6e6);
}
</style>
</head>
<body>
<div class="scroll-container">
<div class="content">
这里是较长的文本内容，用来触发滚动条显示，你可以添加更多内容来观察滚动条的效果。
</div>
</div>
</body>
</html>
注意事项
目前css还没有统一的滚动条样式标准，不同浏览器的实现方式不同，如果需要兼容更多浏览器，建议同时写WebKit和Firefox的适配代码。另外，自定义滚动条时不要设置过窄的宽度，避免用户难以点击操作。
如果需要兼容IE浏览器，由于IE已经停止维护，且市场占有率极低，一般无需做特殊适配，若有特殊需求可以使用IE特有的滚动条样式属性，但不推荐投入过多精力。