# haku-scroll

> vue滚动条组件

Latest version **1.1.7** (published 2019-01-15) · MIT license · 0 weekly downloads

## Install

```sh
npm install haku-scroll
pnpm add haku-scroll
yarn add haku-scroll
bun add haku-scroll
```

## Health

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

Positive: has types; no vulnerabilities.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.7 |
| Published | 2019-01-15 |
| First published | 2018-12-19 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 4 |
| Unpacked size | 370.6 KB |
| Known vulnerabilities | 0 (+2 in 2 direct dependencies) |
| Install scripts | no |
| GitHub stars | 8 |
| Author | hakubox |
| Maintainers | hakubox |
| Keywords | scroll |

## Links

- npm: https://www.npmjs.com/package/haku-scroll
- Repository: https://github.com/hakubox/haku-scroll
- Homepage: https://github.com/hakubox/haku-scroll#readme
- Issues: https://github.com/hakubox/haku-scroll/issues
- npm.io page: https://npm.io/package/haku-scroll

## Dependencies (4)

- [vue](https://npm.io/package/vue.md) ^2.5.11
- [liike](https://npm.io/package/liike.md) ^0.5.2
- [node-sass](https://npm.io/package/node-sass.md) ^4.11.0
- [vue-router](https://npm.io/package/vue-router.md) ^3.0.2

## Recent versions

- 1.1.7 (latest) — 2019-01-15
- 1.1.6 — 2019-01-15
- 1.1.5 — 2018-12-30
- 1.1.4 — 2018-12-30
- 1.1.3 — 2018-12-25
- 1.1.2 — 2018-12-25
- 1.1.1 — 2018-12-24
- 1.1.0 — 2018-12-24
- 1.0.2 — 2018-12-20
- 1.0.1 — 2018-12-20
- 1.0.0 — 2018-12-19

## README

<div align="center">
<img src="https://raw.githubusercontent.com/hakubox/haku-scroll/master/src/assets/logo.png" >
</div>

# haku-scroll [![Build Status](https://travis-ci.org/hakubox/haku-scroll.svg?branch=master)](https://travis-ci.org/hakubox/haku-scroll) [![](https://img.shields.io/npm/dt/haku-scroll.svg)](https://www.npmjs.com/package/haku-scroll) ![](https://img.shields.io/github/license/hakubox/haku-scroll.svg) ![](https://img.shields.io/badge/IE-%E2%89%A5%209-blue.svg) ![](https://img.shields.io/npm/v/haku-scroll.svg) ![](https://img.shields.io/bundlephobia/min/haku-scroll.svg)

> vue滚动条组件

## 示例图

<div align="center">
<img src="https://raw.githubusercontent.com/hakubox/haku-scroll/master/src/assets/printscreen.png" >
</div>

### [示例DEMO](http://47.105.164.200/scroll)

## 说明

:smiley: 一款定制化滚动条，目前仅兼容`PC`端，兼容性为`IE9+`，之后会考虑增加移动端的滚动功能。

> 示例具体可参考 [App.vue页面](./src/App.vue)

## 安装

``` bash
npm install haku-scroll --save
```

## 引入

``` javascript
//全局注册组件
import hakuScroll from 'haku-scroll'
Vue.use(hakuScroll)

//单组件引用
import hakuScroll from 'haku-scroll'
new Vue({
    components: { ...hakuScroll }
})
```

---

## 区域 haku-block

### 组件调用

``` html
<haku-block>
...
</haku-block>
```

### 属性

属性名 | 类型 | 默认值 | 描述
---|---|---|---
contentClass | String | - | 内容class样式
contentStyle | String | - | 内容style样式
anime | Boolean | true | 是否启用平滑移动效果
wheelstep | Number | 100 | 单步鼠标滚动距离
wheeltime | Number | 200 | 单步鼠标滚动时间
wheelseaing | String | 'sineOut' | 滚动时的运动曲线，参考 [liike](https://github.com/LiikeJS/Liike)
vertical | Boolean | true | 纵向滚动条是否展现
horizontal | Boolean | false | 横向滚动条是否展现
watchSubTree | Boolean | false | 是否监听子节点树
parentScroll | Boolean | false | wheel滚动事件延伸至父容器
hideButton | Boolean | true | 隐藏按钮

### 函数

函数名 | 参数 | 返回值 | 描述
---|---|---|---
scrollTo | { x:Number,y:Numbere,anime:Boolean,... } | - | 滚动到某处
refresh | config | - | 刷新/重置滚动条基本属性
getScrollTop | - | Number | 获取距离视窗顶部的像素
getScrollLeft | - | Number | 获取距离视窗左边缘的像素

### 事件

事件名 | 返回参数 | 描述
---|---|---
oninit | - | 组件初始化
ondestroy | - | 组件销毁

---

## 滚动条 haku-scroll

### 组件调用

``` html
<haku-scroll :value.sync="value" :max-value="maxvalue">
...
</haku-scroll>
```

### 属性

属性名 | 类型 | 默认值 | 描述
---|---|---|---
disabled | Boolean | false | 是否禁用
hidden | Boolean | false | 是否隐藏
type | String | - | 滚动条类型（vertical/horizontal）
min | Number | 0 | 可操作最小值
max | Number | 0 | 可操作最大值（0为不设最大值）
step | Number | 0 | 步长（0为不设步长）
size | Number | - | 滚动条滑块大小
value | Number | 0 | 滚动条滚动的值
maxValue | Number | - | 最大值
minValue | Number | 0 | 最小值
hideBtn | Boolean | true | 隐藏按钮

### 函数

函数名 | 参数 | 返回值 | 描述
---|---|---|---
scrollTo | value, isAdd = false | - | 滚动到某处
refresh | - | - | 刷新/重置滚动条基本属性

### 事件

事件名 | 返回参数 | 描述
---|---|---
oninit | - | 组件初始化
ondestroy | - | 组件销毁

## 未完成功能

- [x] 基本功能
- [x] 变化监听
- [x] 鼠标中键滚动
- [x] 自定义滚动条样式
- [x] 支持TypeScript
- [x] 自动隐藏
- [x] 滚动限制
- [x] 滚动事件钩子
- [x] 禁用
- [ ] 扩展至移动端
- [ ] 拆分为独立js组件
- [ ] 自定义工具按钮

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