vue-gemini-scrollbar

vue-gemini-scrollbar

查看demo

介绍

无需配置横向或纵向滚动，自定义滚动条完全按照原生的方式去显示（也就是如果区域存在纵向滚动条，使用它后将替换纵向滚动条）。正因为如此，请不要使用::-webkit-scrollbar来修饰原生滚动条，这样会影响对滚动条宽度的检测。

• 基于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	重新计算滚动区域大小（vue可以监听并触发组件updated的时候，都不需要你手动去调用它；但是像图片资源的load导致高度变化，你需要在合适的时候去手动调用；）
destroy	移除绑定事件及滚动条元素

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

使用

安装组件

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）