Getting Started

Quick Start

Module System

Installation

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

Import

In your entry file:

import Vue from 'vue';
import vuescroll from 'vuescroll';
import 'vuescroll/dist/vuescroll.css';

Vue.use(vuescroll);

In order to remove parts that are not used, you can import vuescroll separately

Only import the features of slide mode:

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

Vue.use(vuescroll);

Only import the features of native mode:

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

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>
<link rel="stylesheet" type="text/css" href="https://unpkg.com/vuescroll/dist/vuescroll.css" />

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: 9/20/2018, 11:15:59 AM