vue-gemini-scrollbar

vue-gemini-scrollbar

查看demo

介绍

• 基于gemini-scrollbar封装的vue组件
• 基于原生滚动的自定义滚动条
• 支持IE9+

安装

npm i vue-gemini-scrollbar --save

如需script方式引入，请自行编译，build后在disk文件夹（vue-gemini-scrollbar.js）

npm run build

Attributes

参数 | 类型 | 默认值 | 说明 ---|---|---|---|--- autoCreate | Boolean | true | 自动创建自定义滚动条 autoshow | Boolean | false | hover时才显示滚动条 forceGemini | Boolean | false | 原生滚动条可见的情况下，强制显示自定义滚动条（开发时会比较有用） minThumbSize | Number | 20 | 滚动条最小长度

注意： createElements参数在这里被强制置为false，不可配置，因为启用它可能会影响Vue的virtual DOM。

Events

事件名称	回调参数	说明
ready	geminiScrollbar	GeminiScrollbar实例创建
resize	-	滚动区域大小调整时触发

Methods

方法名称	说明
create	创建滚动区域
update	重新计算滚动区域大小（一般不需要你这么做，如果发现滚动区域大小变化导致显示不正常，可以尝试调用它）
destroy	移除绑定事件及滚动条元素

使用

安装组件

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

Vue.use(GeminiScrollbar)

在模板中使用

<GeminiScrollbar
    class="my-scroll-bar">
    content...
</GeminiScrollbar>

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

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

添加自己的滚动条样式

/* 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;
}

如何为body设置自定义滚动条

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

html {
    height: 100%;
    /* or */
    height: 100vh;
}

var scrollbar = new Vue.$GeminiScrollbar({
    element: document.body
}).create();

其他实现

• gemini-scrollbar（原生js）
• react-gemini-scrollbar（react）