1

问题描述

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

浏览器内核简介

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

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

代码

代码图示

image.png

代码附上

<!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>

效果图附上

image.png
同理,如果要修改某个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

水冗水孚
1.1k 声望584 粉丝

每一个不曾起舞的日子,都是对生命的辜负