# y-scrollbar

> erhai 前端组件库

Latest version **0.1.9** (published 2022-10-19) · 0 weekly downloads

## Install

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

## Health

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

Positive: has types; no vulnerabilities.

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

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.9 |
| Published | 2022-10-19 |
| First published | 2022-10-19 |
| Weekly downloads | 0 |
| TypeScript types | bundled |
| Module format | CommonJS |
| Node | >=8.9.1 |
| Dependencies | 1 |
| Unpacked size | 92 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | fengye12 |

## Links

- npm: https://www.npmjs.com/package/y-scrollbar
- npm.io page: https://npm.io/package/y-scrollbar

## Dependencies (1)

- [ssr-window](https://npm.io/package/ssr-window.md) ^2.0.0

## Recent versions

- 0.1.9 (latest) — 2022-10-19
- 0.1.8 — 2022-10-19
- 0.1.7 — 2022-10-19
- 0.1.6 — 2022-10-19
- 0.1.5 — 2022-10-19
- 0.1.4 — 2022-10-19

## README

# `@weier/w-scrollbar`

* 滚动条容器

```js
// 安装
npm i @weier/w-scrollbar -S

// 代码引入（可选）
import Vue from 'vue'
import WScrollbar from '@weier/w-scrollbar'
Vue.use(WScrollbar)
```

## 基础用法
> 容器外的宽高需已知(可滚动即可)
> noresize 如果 container 尺寸不会发生变化，最好设置它可以优化性能


:::demo
```jsx
import { defineComponent } from '@vue/composition-api'
import WScrollbar from '@weier/w-scrollbar'

export default defineComponent({
  setup() {

  },
  render() {
    const n = []
    for (let i = 0; i < 100; i++) {
      n.push(i)
    }
    return (
       <div class="WScrollbar-father" style={{
        height: '200px',
        border: '1px dashed #dedede'
       }}>
        <WScrollbar autoShow={false}>
          <ul class="content" style="width: 120%">
            {
              n.map(index => <li key={index}>{index}</li>)
            }
          </ul>
        </WScrollbar>
      </div>
    )
  }
})
```
:::

## w-scrollbar Attributes
| 参数 | 说明 | 类型       | 可选值      |  默认值  |
| ---- | ---- | --------- | ---------- | ------- |
| zIndex |  滚动条层级 | Number  | —— | 1 |  
| autoShow |  是否移入时显示 | Boolean  | true/false | true | 
| light |  滚动条的颜色是否亮色 | Boolean  | true/false | false | 
| noresize |  如果 container 尺寸不会发生变化，最好设置它可以优化性能 | Boolean  | true/false | false |  

## w-scrollbar Events
| 事件名称 | 说明 | 参数    |
| ---- | ---- | --------- | 
| reach-top |  到达顶部 | 无  | 
| reach-bottom |  到达底部 | 无  | 
| reach-left |  到达最左边 | 无  | 
| reach-right |  到达最右边 | 无  | 
| scroll |  鼠标滚动时触发 | scrollInfo(Object)  |

### scrollInfo 参数
| 参数 | 说明 | 类型    |
| ---- | ---- | --------- | 
| scrollTop |  当前滚动容器的scrollTop | Number  | 
| scrollLeft |  当前滚动容器的scrollLeft | Number  | 

## w-scrollbar Methods
| 方法名 | 说明 | 参数    |
| ---- | ---- | --------- | 
| scrollTo |  滚动容器至-位置 |  scrollTop(top/bottom/left/right/end/(Number)), scrollLeft(Number)(可选) | 

## w-scrollbar-slot
| 参数 | 说明 | 类型       | 可选值      |  默认值  |
| ---- | ---- | --------- | ---------- | ------- |
| 默认值 |  默认内容 | ——  | —— | —— |

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