# 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 don't see scrollbar showing up, 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: 5/15/2020, 5:00:22 AM