# vue-scrollbar-live > A vue scrollbar component, support SSR. Latest version **5.7.1** (published 2020-05-19) · MIT license · 0 weekly downloads ## Install ```sh npm install vue-scrollbar-live pnpm add vue-scrollbar-live yarn add vue-scrollbar-live bun add vue-scrollbar-live ``` ## Health **Score 30/100 (F)** — status: abandoned. Positive: has types; esm support; no vulnerabilities; high quality score. Warnings: low downloads. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 5.7.1 | | Published | 2020-05-19 | | First published | 2018-07-23 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | bundled | | Module format | ESM + CommonJS | | Dependencies | 2 | | Unpacked size | 47 KB | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 11 | | Author | 2631541504@qq.com | | Maintainers | livelybone | | Keywords | vue, scrollbar, PC, IE/Edge, mobile, SSR support | ## Links - npm: https://www.npmjs.com/package/vue-scrollbar-live - Repository: https://github.com/livelybone/vue-scrollbar-live - Homepage: https://github.com/livelybone/vue-scrollbar-live#readme - Issues: https://github.com/livelybone/vue-scrollbar-live/issues - npm.io page: https://npm.io/package/vue-scrollbar-live ## Dependencies (2) - [@livelybone/scroll-get](https://npm.io/package/@livelybone/scroll-get.md) ^5.0.2 - [@livelybone/mouse-events](https://npm.io/package/@livelybone/mouse-events.md) ^1.0.0 ## Alternatives - [@sentry/react-native](https://npm.io/package/@sentry/react-native.md) — 2.6M weekly downloads - [@ardatan/aggregate-error](https://npm.io/package/@ardatan/aggregate-error.md) — 708.1K weekly downloads - [custom-error-generator](https://npm.io/package/custom-error-generator.md) — 2.0K weekly downloads - [@technik-sde/prosemirror-recreate-transform](https://npm.io/package/@technik-sde/prosemirror-recreate-transform.md) — 1.5K weekly downloads - [@suchipi/error-utils](https://npm.io/package/@suchipi/error-utils.md) — 78 weekly downloads ## Recent versions - 5.7.1 (latest) — 2020-05-19 - 5.0.0 (next) — 2019-07-23 - 5.7.0 — 2020-05-19 - 5.6.2 — 2020-05-19 - 5.6.1 — 2020-05-19 - 5.6.0 — 2020-05-19 - 5.5.2 — 2020-05-17 - 5.5.1 — 2020-05-17 - 5.5.0 — 2020-05-16 - 5.4.1 — 2020-05-15 - 5.4.0 — 2020-03-11 - 5.3.1 — 2019-09-03 - 5.3.0 — 2019-09-02 - 5.2.2 — 2019-08-03 - 5.2.1 — 2019-08-01 - … 39 more at https://npm.io/package/vue-scrollbar-live/versions ## README # vue-scrollbar-live [![NPM Version](http://img.shields.io/npm/v/vue-scrollbar-live.svg?style=flat-square)](https://www.npmjs.com/package/vue-scrollbar-live) [![Download Month](http://img.shields.io/npm/dm/vue-scrollbar-live.svg?style=flat-square)](https://www.npmjs.com/package/vue-scrollbar-live) ![gzip with dependencies: 4.9kb](https://img.shields.io/badge/gzip--with--dependencies-4.9kb-brightgreen.svg "gzip with dependencies: 4.9kb") ![typescript](https://img.shields.io/badge/typescript-supported-blue.svg "typescript") ![pkg.module](https://img.shields.io/badge/pkg.module-supported-blue.svg "pkg.module") > `pkg.module supported`, which means that you can apply tree-shaking in you project [中文文档](./README-CN.md) A vue scrollbar component, support SSR. ## repository https://github.com/livelybone/vue-scrollbar-live.git ## Demo https://github.com/livelybone/vue-scrollbar-live#readme ## Run Example you can see the usage by run the example of the module, here is the step: 1. Clone the library `git clone https://github.com/livelybone/vue-scrollbar-live.git` 2. Go to the directory `cd your-module-directory` 3. Install npm dependencies `npm i`(use taobao registry: `npm i --registry=http://registry.npm.taobao.org`) 4. Open service `npm run dev` 5. See the example(usually is `http://127.0.0.1:3000/examples/test.html`) in your browser ## Installation ```bash npm i -S vue-scrollbar-live ``` ## Global name - The variable the module exported in `umd` bundle `VueScrollbar` ## Interface See what method or params you can use in [index.d.ts](./index.d.ts) ## Usage ```js import VueScrollbar from 'vue-scrollbar-live'; // Global register Vue.component('scrollbar', VueScrollbar); // Local register new Vue({ components:{VueScrollbar} }) ``` when you want to set this module as external while you are developing another module, you should import it like this: ```js import * as VueScrollbar from 'vue-scrollbar-live' // then use it by need ``` ## CDN Use in html, see what you can use in [CDN: unpkg](https://unpkg.com/vue-scrollbar-live/lib/umd/) ```html <-- use what you want --> ``` Or，see what you can use in [CDN: jsdelivr](https://cdn.jsdelivr.net/npm/vue-scrollbar-live/lib/umd/) ```html ``` ## style Since 5.0.0， you don't need to import the css file in your project For rewrite style, you can copy the `index.scss` or `index.css` file, rewrite it use `!important`(this is necessary), and the import the file in your project ## Props | Name | Type | DefaultValue | Description | | ------------- | ----------------------------------------- | -------------------- | ------------ | | `isMobile` | `Boolean` | `false` | Mark the device that component be used | | `maxHeight` | `[String, Number]` | none | Used to set style max-height of the wrap `.scrollbar-wrap`.$/ | | `scrollTo` | `[Number, Object]` | `0` | Used to set scroll y of the content wrap `.scrollbar-content`. value: `0 ~ 1`$/ | | `marginToWrap` | `Number` | `0` | Used to set scroll y of the content wrap `.scrollbar-content`. value: `0 ~ 1`$/ | ## Events | Name | EmittedData | Description | | --------------------- | --------------------- | ------------------------------------------------- | | `wrapClick` | `event` | `click` event of the wrap | | `reachBottom` | none | Triggered when the scrollbar reach the bottom | | `reachTop` | none | Triggered when the scrollbar reach the top | | `reachLeft` | none | Triggered when the scrollbar reach the left | | `reachRight` | none | Triggered when the scrollbar reach the right | | `startDrag` | `Object` | Drag start event of the scrollbar | | `endDrag` | `Object` | Drag end event of the scrollbar | | `scroll` | `Event` | Native scroll event | | `domChange` | none | Triggered when the dom that refer to this comp changed | ## QA 1. Error `Error: spawn node-sass ENOENT` > You may need install node-sass globally, `npm i -g node-sass` 2. The domChange event not triggered when the sub dom changed. > Check that the current browser support MutationObserver API. > If not, you can use MutationObserver polyfill to solve this problem --- _Source: https://npm.io/package/vue-scrollbar-live · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._