Vue3-scrollbar NPM

vue3-scrollbar

A scrollbar plugin for Vue3 application. (Like MacOS.)

All code is from a vue-ohyeah-scroll, I just update it to Vue.js 3 version. If you find any bug, please email me 54806737 at qq.com

给Vue3程序的仿Mac系统滚动条

所有代码均来自于vue-ohyeah-scroll。感谢原作者，但是他的代码已经有两年没有更新了，有问题可以随时给我发邮件沟通。

Project setup

npm install vue3-scrollbar --save-dev

Example:

main.js

    import { createApp } from 'vue';
    import App from './App.vue';

    import v3scroll from 'vue3-scrollbar';

    createApp(App)
    .use(v3scroll)
    .mount('#app');

App.vue

  <v3scroll breadth="4" :autoHide="autoHide">
    <div id="app">
      ...
    </div>
  </v3scroll>

Attributes 自定义属性

属性名	类型	默认值	描述
id	String	随机数	一个唯一的 ID，可以不填
width	Number,String	100%	容器宽度，默认贴合父级(父级需要有宽度)，也可自己设置，接受合法的 CSS 值，传数字会转换成 px
height	Number,String	100%	容器高度，默认贴合父级(父级需要有高度)，也可自己设置，接受合法的 CSS 值，传数字会转换成 px
breadth	String	6	滑块的粗细，单位: px
thumbColor	String	#7f7f7f	滑块的颜色，接受 CSS 颜色值
trackColor	String	transparent	轨道的颜色，接受 CSS 颜色值
autoHide	Boolean	true	是否自动隐藏滚动条，鼠标在区域内才显示
left	Boolean	false	是否把垂直滚动条放在容器的左边
top	Boolean	false	是否把水平滚动条放在容器的顶端
noVer	Boolean	false	是否禁用垂直滚动条(overflow-y:hidden)
noHor	Boolean	false	是否禁用水平滚动条(overflow-x:hidden)
minLength	Number	20	当内容无限多的时候，滑块最短不得低于此值，单位: px
resizeObject	Boolean	false	如果存在监听不到内容高度变化的情况可以把这个值改为 true 试试，（nuxt.js 打包后 firefox 发现有这种情况）