Getting Started

WARNING

Since 4.10.1, you don't need to import vuescroll/dist/vuescroll.css any more,

Installation

Module System

Installation

 npm i vuescroll -S
 # or use yarn
 # yarn add vuescroll

Import

  1. import globally

In your entry file:

import Vue from 'vue';
import vuescroll from 'vuescroll';

// You can set global config here.
Vue.use(vuescroll, {
  ops: {
    // The global config
  },
  name: 'myScroll' // customize component name, default -> vueScroll
});

/**
 * or
 */
Vue.prototype.$vuescrollConfig = {
  bar: {
    background: '#000'
  }
};
  1. import locally
<template>
  <vuescroll> <!-- Your content... --> </vuescroll>
</template>
<script>
  import vuescroll from 'vuescroll';

  export default {
    components: {
      vuescroll
    }
  };
</script>

Only import the mode you need.

Only import the features of slide mode:

import Vue from 'vue';
import vuescroll from 'vuescroll/dist/vuescroll-slide';

Vue.use(vuescroll);

Only import the features of native mode:

import Vue from 'vue';
import vuescroll from 'vuescroll/dist/vuescroll-native';

Vue.use(vuescroll);

Browser Environment

Direct import via CDN

<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/vuescroll"></script>
<!-- import vuescroll-slide -->
<script src="https://unpkg.com/vuescroll/dist/vuescroll-slide.js"></script>
<!-- import vuescroll-native -->
<script src="https://unpkg.com/vuescroll/dist/vuescroll-native.js"></script>

Usage

Put it outside the child element, inside the parent element. Just so easy.

WARNING

If you doesn't see scrollbar show, please open dev-tool to checkout whether your child's size is greater than parent's.The condition for the scrollbar to appear is the same as the native scrollbar, that is, the size of the child element exceeds the parent element.

<template>
  <div class="parent-element">
    <!-- bind your configurations -->
    <vue-scroll :ops="ops"> <div class="child-element"></div> </vue-scroll>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        ops: {
          vuescroll: {},
          scrollPanel: {},
          rail: {},
          bar: {}
        }
      }
    }
  }
</script>

TIP

If you have an emergency, you can call the refresh function.

Last Updated: 6/24/2019, 11:05:29 PM