# Getting Started
WARNING
Since 4.10.1, you don't need to import vuescroll/dist/vuescroll.css any more,
# Installation
# Vue Compatibility Table
| vue version | vuescroll version |
|---|---|
| 2.x | <=4.17.4 |
| 3.x | >=5.0.0 |
# Module System
# Installation
npm i vuescroll -S
# or use yarn
# yarn add vuescroll
# Import
- import globally
# For vue 2.x
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"
}
};
# For vue 3.x
In your entry file:
import { createApp } from "vue";
import vuescroll from "vuescroll";
const app = createApp(App);
// You can set global config here.
app.use(vuescroll, {
ops: {
// The global config
},
name: "myScroll" // customize component name, default -> vueScroll
});
- 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 theparent 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.
