滚动条样式修改

前言

浏览器中的滚动条样式大家一定都不陌生，其样式并不好康。可能很多小伙伴还不知道，这个东东的样式也可以修改（仅支持部分现代浏览器），本次就来带大家用 CSS 修改一下它的样式。

一、认识滚动条

首先我们先来简单看一下滚动条是由哪几部分组成的：

当横向和纵向都有滚动条时，还会有一个交汇的部分（见下图），但是因为一般网页开发中都不会让横向出现滚动条（因为影响美观），所以这个小方块出现的频率不算太高。下图为同时有垂直滚动条和水平滚动条时交汇的部分：

二、解决方案

1. CSS伪类

目前我们可以通过 CSS伪类 来实现滚动条的样式修改，以下为修改滚动条样式用到的CSS伪类：

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

此处附上MDN文档传送门：https://developer.mozilla.org/zh-CN/docs/Web/CSS/::-webkit-scrollbar

2. 兼容性问题

当然这种解决方案还存在一定的兼容性问题，仅仅在支持WebKit的浏览器 (例如, 谷歌Chrome, 苹果Safari)可以使用。其实一看到 -webkit- 前缀就能明白它是 CSS3 中的 私有属性前缀 ，特定前缀是为了适配特定浏览器内核的。我们前往Can I use对其兼容性一探究竟：

由上图我们可以看到，兼容性并不算太好，不过我们也不用过于在意，毕竟我们只是规则的使用者而非制定者。

三、进行测试

1. 整个滚动条

我们一条属性一条属性来进行测试，首先使用 ::-webkit-scrollbar 。先改变一下它的宽度，测试一下效果：

/* 整个滚动条 */
/* 宽高分别对应纵向滚动条和横向滚动条的宽度 */
::-webkit-scrollbar {
   
    width: 50px;
}

我们可以看到，滚动条似乎“消失”了，但是仍然能靠鼠标拖动来滚动页面。我们再给它加一个背景色康康效果：

/* 整个滚动条 */
::-webkit-scrollbar {
   
    width: 50px;
    background-color: skyblue;
}