# scrollbar-vue2

> 这个人很懒什么也没有

Latest version **0.0.4** (published 2023-06-11) · ISC license · 0 weekly downloads

## Install

```sh
npm install scrollbar-vue2
pnpm add scrollbar-vue2
yarn add scrollbar-vue2
bun add scrollbar-vue2
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.4 |
| Published | 2023-06-11 |
| First published | 2023-06-10 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 19.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | linjy |
| Maintainers | linxx5599 |

## Links

- npm: https://www.npmjs.com/package/scrollbar-vue2
- Repository: https://github.com/linxx5599/scrollbar-vue2
- Homepage: https://github.com/linxx5599/scrollbar-vue2#readme
- Issues: https://github.com/linxx5599/scrollbar-vue2/issues
- npm.io page: https://npm.io/package/scrollbar-vue2

## Recent versions

- 0.0.4 (latest) — 2023-06-11
- 0.0.3 — 2023-06-11
- 0.0.2 — 2023-06-11
- 0.0.1 — 2023-06-10

## README

## 基于 vue2 的虚拟滚动条

```bash
$ npm install scrollbar-vue2 --save
```

```bash
$ yarn add scrollbar-vue2
```

example
```bash
  <template>
   <div class="tag">
      <Scrollbar :always="true" class="scrollbar">
        <div class="tags" style="height: 200px">
          <div v-for="t in 800" :key="t">{{ t }}</div>
        </div>
      </Scrollbar>
    </div>
  </template>
  <script>
  import Scrollbar from "scrollbar-vue2";
  export default {
    components: { Scrollbar }
  }
  </script>
  <style lang="scss">
  .tag {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: rgba(116, 116, 116, 0.281);
    height: 100px;
    .scrollbar {
      width: 100%;
      .tags {
        display: flex;
        width: 1px;
      }
    }
  }
  </style>

```

### 参数说明

<table>
  <thead>
    <tr>
      <th>prop</th>
      <th>type</th>
      <th>description</th>
      <th>default</th>
    </tr>
  </thead>
  <tbody>
  <tr>
    <td>height</td>
    <td>[String, Number]</td>
    <td>滚动条的高度</td>
    <td>""</td>
  </tr>
  <tr>
    <td>maxHeight</td>
    <td>[String, Number]</td>
    <td>滚动条的最大高度</td>
    <td>""</td>
  </tr>
  <tr>
    <td>native</td>
    <td>Boolean</td>
    <td>是否使用原生滚动条</td>
    <td>false</td>
  </tr>
  <tr>
    <td>wrapStyle</td>
    <td>[String, Object, Array]</td>
    <td>wrap的样式</td>
    <td>""</td>
  </tr>
  <tr>
    <td>wrapClass</td>
    <td>[String, Array]</td>
    <td>wrap的Class</td>
    <td>""</td>
  </tr>
  <tr>
    <td>viewStyle</td>
    <td>[String, Array]</td>
    <td>view的样式</td>
    <td>""</td>
  </tr>
  <tr>
    <td>viewClass</td>
    <td>[String, Array]</td>
    <td>view的Class</td>
    <td>""</td>
  </tr>
  <tr>
    <td>noresize</td>
    <td>Boolean</td>
    <td>如果container尺寸不会发生变化,最好设置它可以优化性能</td>
    <td></td>
  </tr>
  <tr>
    <td>tag</td>
    <td>String</td>
    <td>元素tag</td>
    <td>div</td>
  </tr>
  <tr>
    <td>always</td>
    <td>Boolean</td>
    <td>总是显示滚动条</td>
    <td></td>
  </tr>
  <tr>
    <td>minSize</td>
    <td>Number</td>
    <td>滚动条的最小尺寸</td>
    <td>20</td>
  </tr>
  </tbody>
</table>

---
_Source: https://npm.io/package/scrollbar-vue2 · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._