共计 1723 个字符，预计需要花费 5 分钟才能阅读完成。
问题形容
谷歌浏览器自带的滚动条的款式，不太好看。所以有时候可能要批改一下其款式。本文以 vue 的我的项目为例，针对于应用 webkit 内核的浏览器，其对应浏览器滚动条的款式管制都无效。
浏览器内核简介
浏览器的内核引擎，基本上是三分天下：
- WebKit 内核: Google Chrome、Safari、傲游 3、猎豹浏览器、百度浏览器、opera 浏览器等、都是基于 Webkit 开发的（edge 浏览器也反对上面的 css 语法哦）
- Gecko 内核: Firefox 是基于 Gecko 开发
- Trident 内核: IE 是基于 Trident 开发的
代码
代码图示
代码附上
<!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">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title>
<%= htmlWebpackPlugin.options.title %>
</title>
<style>
/* 仅实用于 webkit 的浏览器 */
/* 定义滚动条和滚动条轨道的宽度 */
::-webkit-scrollbar {
width: 15px;
/* height: 100px;
这里就不必定义滚动条的高度了
因为高度的话，是依据内容自适应的 */
}
/* 定义滚动条 内暗影 + 圆角 */
::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
background-color: pink;
}
/* 定义滚动条滑动轨道 内暗影 + 圆角 */
::-webkit-scrollbar-track {
border-radius: 4px;
background-color: #bfa;
}
/* 鼠标放上去成果 */
::-webkit-scrollbar-thumb:hover {background: #baf;}
</style>
</head>
<body>
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled.
Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>效果图附上
同理，如果要批改某个 div 的款式，只须要在类名前面加上上述的 webkit 伪元素即可，比方咱们批改一个类名为 box 的 div 的滚动条款式
.box::-webkit-scrollbar {width: 9px;}
.box::-webkit-scrollbar-thumb {
background-color: red;
border-radius: 8px;
}
.box::-webkit-scrollbar-thumb:hover {background: #baf;}比方咱们批改饿了么 UI 中的 el-table 的竖向滚动条的款式
// 表格的滚动条滑块
/deep/ .el-table__body-wrapper::-webkit-scrollbar {width: 9px;}
// 滚动条的滑块
/deep/ .el-table__body-wrapper::-webkit-scrollbar-thumb {
background-color: #ddd;
border-radius: 8px;
}总结
好忘性不如烂笔头，记录一下
最初附上 MDN 文档中对于::-webkit-scrollbar 的介绍。传送门如下：
https://developer.mozilla.org…::-webkit-scrollbar
正文完
