vue-gemini-scrollbar

vue-gemini-scrollbar(vue组件-自定义滚动条)-脚本宝典
vue-gemini-scrollbar(vue组件-自定义滚动条)-脚本宝典
Vue 2.x

NPM

查看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();

其他实现

本文固定链接: http://www.js-code.com/vue-js/vue-js_24926.html