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>