yufy1314 / vuescroll

Customize scrollbars and smooth-scroll on Vue.js.

Vuescroll

Online Demo(Recommend to use mobile)

Introduction

Vuescroll is a customizable, multi-mode driven scrollbar plugin based on Vue.js - vuescrolljs.yvescoding.org

You can use it on PC or mobile by changing its mode.

Features

Basic & native mode 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 change of scrolled content.

• Support typescript.

• Support SSR(Server-Side Rendering).

Slide mode(includes basic & slide mode features) features

• Support pull to refresh and push to load, for detail, you can checkout this demo, and this demo of SSR version.

• Support snapping. Snapping means you can scroll same given distance in options at each timem. You can use it to make a time-picker.

• Support paging. Paging means you can scroll a distance of container at each time. You can use it to make such a Carousel.

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 reduce the size of the bundle, you can import modes 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>

Detailed guides

• Online Examples
• Get Started Guide
• Configurations
• API Reference
• Event Reference
• Slot Reference

Changelog

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

Contribution

Please check out CONTRIBUTING.

Communication

For bug report or feature request, you can raise an issue or twitter @wangyi70991

License

MIT