A vuejs scrollbar component for PC

by Vue.js Examples

vue-scrollbar-live

pkg.module supported, which means that you can apply tree-shaking in you project

A vue scrollbar component, support SSR.

View Demo View Github

Run Example

Your 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 vue-scrollbar-live
  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/examples/test.html) in your browser

Installation

npm i -S vue-scrollbar-live

Global name

VueScrollbar

Usage

import VueScrollbar from 'vue-scrollbar-live';

// 引入css
import 'vue-scrollbar-live/lib/css/index.css';

// 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:

import * as VueScrollbar  from 'vue-scrollbar-live'

// then use it by need

Use in html, see what your can use in CDN: unpkg

<-- use what you want -->
<script src="https://unpkg.com/vue-scrollbar-live/lib/umd/<--module-->.js"></script>

Interface

See in index.d.ts

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

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

Attention for application

If you put the component at a div that is display:none, the component may be will not work

There are two solutions:

  1. Set opacity: 0; pointer-events: none; instead of display: none
  2. Use v-if instead of set display: none

QA

  1. Error Error: spawn node-sass ENOENT

You may need install node-sass globally, npm i -g node-sass

GitHub