Vue下配置好看的滚动条
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.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
2.1.2 属性 Attribute
| 参数 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| autoCreate | Boolean | true | 自动创建自定义滚动条 |
| autoshow | Boolean | false | hover时才显示滚动条 |
| forceGemini | Boolean | false | 原生滚动条可见的情况下，强制显示自定义滚动条（开发时会比较有用） |
| minThumbSize | Number | 20 | 滚动条最小长度 |
2.1.3 事件 Events
| 事件名称 | 回调参数 | 说明 |
|---|---|---|
| ready | geminiScrollbar实例 | GeminiScrollbar实例创建 |
| resize | - | 滚动区域大小调整时触发 |
2.1.4 方法 Methods
| 方法名称 | 说明 |
|---|---|
| create | 创建滚动区域 |
| update | 重新计算滚动区域大小（vue可以监听并触发组件updated的时候，都不需要你手动去调用它；但是像图片资源的load导致高度变化，你需要在合适的时候去手动调用；） |
| destroy | 移除绑定事件及滚动条元素 |
如何调用：
监听ready事件，通过回调函数的参数geminiScrollbar实例来调用这些方法
2.2 使用
2.2.1 引入组件
import Vue from 'vue'
import GeminiScrollbar from 'vue-gemini-scrollbar'
Vue.use(GeminiScrollbar)
2.2.2 Vue中使用
template:
<GeminiScrollbar
class="my-scroll-bar">
content...
</GeminiScrollbar>
注意：只有内容溢出才会有滚动效果
css:
.my-scroll-bar{
height:200px;
}
添加自己的滚动条样式
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;
}
2.2.3 给body设置自定义滚动条
因为vue组件的根元素不能为body，此时可以从Vue.$geminiScrollbar访问到GeminiScrollbar对象，然后你就可以自由使用它了（文档请参考：gemini-scrollbar）。
css：
html {
height: 100%;
/* or */
height: 100vh;
}
js：
var scrollbar = new Vue.$geminiScrollbar({
element: document.body
}).create();