1、原生代码优化

1.1 滚动条组成

::-webkit-scrollbar 滚动条整体部分
::-webkit-scrollbar-thumb 滚动条里面的小方块，能向上向下移动（或往左往右移动，取决于是垂直滚动条还是水平滚动条）
::-webkit-scrollbar-track 滚动条的轨道（里面装有Thumb）
::-webkit-scrollbar-button 滚动条的轨道的两端按钮，允许通过点击微调小方块的位置。
::-webkit-scrollbar-track-piece 内层轨道，滚动条中间部分（除去）
::-webkit-scrollbar-corner 边角，即两个滚动条的交汇处
::-webkit-resizer 两个滚动条的交汇处上用于通过拖动调整元素大小的小控件

1.2 简洁展示

说明：core_dialogue 为需要美化滚动条div盒子的类名，也可以按照需求更改为其他的名称。

.core_dialogue {
  height: 100%;
  overflow: scroll;
}
.core_dialogue::-webkit-scrollbar-track-piece {
  background-color: #f8f8f800;
}
.core_dialogue::-webkit-scrollbar {
  width: 6px;
  transition: all 2s;
}
.core_dialogue::-webkit-scrollbar-thumb {
  background-color: #dddddd;
  border-radius: 100px;
}
.core_dialogue::-webkit-scrollbar-thumb:hover {
  background-color: #bbb;
}
.core_dialogue::-webkit-scrollbar-corner {
  background-color: rgba(255, 255, 255, 0);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

效果如下：

【鼠标未选中】

【鼠标选中后】

1.3 参考

1）CSS3自定义滚动条样式 -webkit-scrollbar
2）CSS之设置滚动条样式
3）美化element中的el-table滚动条
4）gemini-scrollbar

2、（vue组件-自定义滚动条）

一般使用原生即可，组件有一些BUG，挺麻烦的，可以简单使用。
介绍：vue-gemini-scrollbar
官网：官网+Demo

2.1 介绍

2.1.1 安装

npm install vue-gemini-scrollbar --save
1

2.1.2 属性 Attribute

2.1.3 事件 Events

2.1.4 方法 Methods

如何调用：
监听ready事件，通过回调函数的参数geminiScrollbar实例来调用这些方法

2.2 使用

2.2.1 引入组件

import Vue from 'vue'
import GeminiScrollbar from 'vue-gemini-scrollbar'

Vue.use(GeminiScrollbar)
1
2
3
4

2.2.2 Vue中使用

template:

    content...

1
2
3
4

注意：只有内容溢出才会有滚动效果

css:

.my-scroll-bar{
    height:200px;
}
1
2
3

添加自己的滚动条样式
css:

/* override gemini-scrollbar default styles */

/* vertical scrollbar track */
.gm-scrollbar.-vertical {
  background-color: #f0f0f0
}

/* horizontal scrollbar track */
.gm-scrollbar.-horizontal {
  background-color: transparent;
}

/* scrollbar thumb */
.gm-scrollbar .thumb {
  background-color: rebeccapurple;
}
.gm-scrollbar .thumb:hover {
  background-color: fuchsia;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

2.2.3 给body设置自定义滚动条

因为vue组件的根元素不能为body，此时可以从Vue.$geminiScrollbar访问到GeminiScrollbar对象，然后你就可以自由使用它了（文档请参考：gemini-scrollbar）。

css：

html {
    height: 100%;
    /* or */
    height: 100vh;
}
1
2
3
4
5

js：

var scrollbar = new Vue.$geminiScrollbar({
    element: document.body
}).create();
1
2
3

2.3 参考

1）（vue组件-自定义滚动条）
2）vue-gemini-scrollbar