vue-smooth-scrollbar

idiotWu/smooth-scrollbar for Vue.js projects.

Features

1. Infinite loading

Demo

GitHub Pages

Usage

1. Install dependency

yarn add @blackbp/vue-smooth-scrollbar

2. Import component into your app.js or component

In your App.js

import Vue from 'vue'
...
import ScrollView from '@blackbp/vue-smooth-scrollbar'
...

new Vue({
    components: {
        ScrollView
    }
})

In vue single file component

import ScrollView from '@blackbp/vue-smooth-scrollbar'

export default {
    components: {
        ScrollView
    }
}

3. Use component in your templates

You should set height to component! This is important

<template>
    <scroll-view class="scroll-area">
        ...awesome content
    </scroll-view>
</template>

<style>
  .scroll-area {
    width: 100%;
    height: 500px; // You should set height to component! This is important
  }
</style>

Props

Prop name	Type	Default	Description
infiniteLoading	Boolean	false	Enable infinite loading
loadThreshold	Number	50	Infinite loading threshold (distance from a bottom of content)
options	Object	{}	smooth-scroll options. See here.
plugins	Array	[]	Array of smooth-scrollbar plugins

Events

Event name	Args	Description
@endy	-	Reaching the end of the scroll on the y axis
@endx	-	Reaching the end of the scroll on the x axis
@scroll	status: Object	Fires when scrolling on every axis (see details below)
@loading	state: Object	Fires when reaching the end of the content

@scroll status object:

let status = {
    offset: {
        x: number,
        y: number,
    },
    limit: {
        x: number,
        y: number,
    },
}

@loading state object:

// Your component
<template>
    <scroll-view ref="scrollView" 
                 :infinite-loading="true" 
                 @loading="onInfinite">
        <div v-for="item in list" 
             :key="`awesome-item-${item.id}`">
            ...awesome content
        </div>
    </scroll-view>
</template>

export default {
    data() {
        return {
            list: [],
            page: 1
        }
    },
    methods: {
        async onInfinite(state) {
            let res = await someAsyncFunc();
            
            if(res.list) {
                this.list.push(...rest.list);
                this.page = ++this.page;
                state.loaded(); // If there is data, then set state loaded (keep emit @loading event)
            } else {
                state.completed(); // If no data, then set state completed (stop emit @loading event)
            }
        },
        resetInfScroll() {
            this.$refs.scrollView.resetInfLoad(); // Resets the state of the infinite load
        }
    }
}

To run example

Clone this repo

yarn install
yarn run serve

Backlog

• Plugin structure
• Basic implementation
• Options
• Events
• Methods
• Styling
• Build dist
• SSR / nuxt