vue-scrollbar-live
    TypeScript icon, indicating that this package has built-in type declarations

    5.7.1 • Public • Published

    vue-scrollbar-live

    NPM Version Download Month gzip with dependencies: 4.9kb typescript pkg.module

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

    中文文档

    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

    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

    Usage

    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:

    import * as VueScrollbar  from 'vue-scrollbar-live'
     
    // then use it by need

    CDN

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

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

    Or,see what you can use in CDN: jsdelivr

    <script src="https://cdn.jsdelivr.net/npm/vue-scrollbar-live/lib/umd/<--module-->.js"></script> 

    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

    1. 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

    Install

    npm i vue-scrollbar-live

    DownloadsWeekly Downloads

    606

    Version

    5.7.1

    License

    MIT

    Unpacked Size

    48.1 kB

    Total Files

    10

    Last publish

    Collaborators

    • livelybone