问题形容

谷歌浏览器自带的滚动条的款式，不太好看。所以有时候可能要批改一下其款式。本文以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