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:
;; Vue;
$SkyScroll
is available on any Vue instance and exposes a number of useful scroll-related properties.
In a component template:
{{$SkyScroll.scroll.y}} {{$SkyScroll.scroll.x}} {{$SkyScroll.scroll.deltaY}} {{$SkyScroll.scroll.directionY}} {{$SkyScroll.scroll.last.y}} {{$SkyScroll.window.width}} {{$SkyScroll.document.height}}
In the component $SkyScroll prop, a few options and scroll and resize callbacks are also available:
name: 'ExampleComponent' { // ... } methods: // ... $SkyScroll: // scroll [function] // Callback for scroll event { console; console; console; console; console; } // resize [function] // Callback for resize event { console; console; console; } // onMounted [boolean] - default: true // If true scroll and resize callbacks a executed on component mount onMounted: true // dimensions [boolean] - default: false // Determines if SkyScroll should keep track of $el dimensions. If true // this.$dimensions will be added to the instance, which holds the // boundingClientRect of this.$el - and automatically keeps it up to // date on resize. dimensions: false ;
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!