A reactive virtual scrollbar based on vuejs 2
vuescroll
vuescroll is a virtual scrollbar based on vue.js 2.X which can both support PC and mobile phone.You can customize the scrollbar how you like instead of using native in browser.
Features
Full features of scrollor.
Ability to customize scrollbar by powerful configurations.
Ability to detect size change of content and automatically update.
smooth-scroll Integration.
Vue-Powered.
Get Started
Installation
Direct Download / CDN
<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/vuescroll"></script>
Use npm or yarn
npm install vuescroll -S
# yarn add vuescroll
app.js
// In module system, you need to manully install
// and in browser environment need not.
import Vue from 'vue'
import vuescroll from 'vuescroll'
Vue.use(vuescroll)
// declare Vue instance and bind your options.
const vm = new Vue({
el: "#app",
data: {
ops: {
// write your own options in ops
vuescroll: {
},
scrollPanel: {
}
// ...
}
}
})
index.html
<div id="app" >
<!-- bind ops -->
<vue-scroll :ops="ops">
<!-- the content you want to scroll -->
<div
class="content"
v-for= "item in 100"
:key="item"
>
<span>{{item}}</span>
</div>
</vue-scroll>
</div>
Preview
Toggle between two modes
Smooth scroll
BTW, Here are many scroll animations you can choose.