基于webkit的浏览器修改滚动条的样式（如谷歌浏览器、Safari浏览器、Opera浏览器等）

问题描述

谷歌浏览器自带的滚动条的样式，不太好看。所以有时候可能要修改一下其样式。本文以vue的项目为例，针对于使用webkit内核的浏览器，其对应浏览器滚动条的样式控制都有效。

浏览器内核简介

浏览器的内核引擎，基本上是三分天下：

• WebKit内核: Google Chrome、Safari、傲游3、猎豹浏览器、百度浏览器、opera浏览器等、都是基于Webkit开发的（edge浏览器也支持下面的css语法哦）
• Gecko内核: Firefox 是基于Gecko开发
• Trident内核: IE是基于Trident开发的

代码

代码图示

代码附上

效果图附上

同理，如果要修改某个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