vue3-scrollbar

A scrollbar plugin for Vue3 application. (Like MacOS.)
2,254
Install
npm install vue3-scrollbar
Latest Version:0.1.9
Vue:3
Older releases:2
Last Updated:Jul 5, 2021
Links: npm
Maintainer: mollerzhu

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 发现有这种情况）

A small change:

  "breath": "6"

I modify it from number to string. So you can use it in your component like this:

  <v3scroll breadth="4">
  </v3scroll>

Version History

Version Released Vue License
0.1.9 ^3.0.0
0.1.8 ^3.0.0
0.1.7 ^3.0.0
0.1.6 ^3.0.0
0.1.5 ^3.0.0