Vue下配置好看的滚动条

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 {
  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();