脚本宝典收集整理的这篇文章主要介绍了

vue-gemini-scrollbar(vue组件-自定义滚动条)

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。

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

其他实现

总结

以上是脚本宝典为你收集整理的

vue-gemini-scrollbar(vue组件-自定义滚动条)

全部内容,希望文章能够帮你解决

vue-gemini-scrollbar(vue组件-自定义滚动条)

所遇到的程序开发问题,欢迎加入QQ群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过