sky-scroll v0.1.0

SkyScroll

A Vue plugin for scroll/resize events and calculations.

Description

This plugin exposes a handful of useful properties on all Vue instances, including scroll y and x position, window height and width as well as document height and width.

Installation

npm install sky-scroll

or

yarn add sky-scroll

Usage

Import and install SkyScroll:

import Vue from 'vue';
import SkyScroll from 'sky-scroll';

Vue.use(SkyScroll);

$SkyScroll is available on any Vue instance and exposes a number of useful scroll-related properties.

In a component template:

<div class="example-component">
    <span>{{$SkyScroll.scroll.y}}</span>
    <span>{{$SkyScroll.scroll.x}}</span>
    <span>{{$SkyScroll.scroll.deltaY}}</span>
    <span>{{$SkyScroll.scroll.directionY}}</span>
    <span>{{$SkyScroll.scroll.last.y}}</span>
    <span>{{$SkyScroll.window.width}}</span>
    <span>{{$SkyScroll.document.height}}</span>
</div>

In the component options, scroll and resize callbacks are also available:

export default {
    name: 'ExampleComponent',
    data() {
        // ...
    },
    methods: {
        // ...
    },
    $SkyScroll: {
        scroll({ scroll, window, document }) {
            console.log('scroll y', scroll.y);
            console.log('scroll last y', scroll.last.y);
            console.log('scroll direction y', scroll.directionY);
            console.log('window width', window.width);
            console.log('document height', document.height);
        },
        resize({ scroll, window, document }) {
            console.log('scroll x', scroll.x);
            console.log('window width', window.width);
            console.log('document height', document.height);
        },
    },
};

Credits

This module is made by the Frontenders at skybrud.dk. Feel free to use it in any way you want. Feedback, questions and bugreports should be posted as issues. Pull-requests appreciated!