Vuescroll

English Version | 中文版

A powerful, customizable, multi-mode scrollbar plugin based on Vue.js - vuescrolljs.yvescoding.org

Demo

Online Demo(Recommend to use mobile)

Features

Basic features

Support customize scrollbar, including setting rail/bar's backgroundColor , opacity,and setting bar's keepShow or not.
Support smoothly scroll, you can set easing to get different scroll animations.
Support detecting the size of scrolled content, you can checkout this demo.

Features only for slide mode

Support pull to refresh and push to load, for detail, you can checkout this demo, and this demo of SSR version.
Support snap config, scroll same distance at each time, you can checkout this demo
Support paging. You can checkout this demo

Other features

Support typescript
Support SSR, you can checkout this demo

Quick Start

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);

Usage

Wrap the content you need to scroll by vuescroll

  <template>
    <div class='your-container'>
        <!-- bind your configurations -->
        <vue-scroll :ops="ops">
            <div class='your-content'>
            </div>
        </vue-scroll>
    </div>
  </template>
  <script>
    export default {
      data() {
        return {
          ops: {
            // some configs....
          }
        }
      }
    }
  </script>

Guide List

Todo List

~~Separate vuescroll into two parts : Native mode and Slide mode(Achieved)~~

Changelog

Detailed changes for each release are documented in the release notes.

Contribution

Please check out CONTRIBUTING.

Communication

Twitter@wangyi70991

License

MIT

amenhotep19 / vuescroll Goto Github PK

vuescroll's Introduction