blackbp / vue-smooth-scrollbar

A wrapper for smooth-scrollbar to Vue Component

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

vue-smooth-scrollbar's Issues

Is this project still alive?

I've found this project incredibly useful, however the dependencies are out of date leading to breakages with newer versions of the base smooth-scrollbar project. I've managed to get some kind of upgrade done, although since this was for a time-dependent project (and honestly I'm still kind of new to this stuff) it isn't in the best shape and neglects the linting and formatting.

Is this package still maintained or is it acceptable for me to push my fork to NPM to keep it alive?