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.

Pull-Refresh and Push-Load

GitHub