https://github.com/skybrud/sky-scroll
Service providing the engine for events based on scroll
https://github.com/skybrud/sky-scroll
Last synced: 10 months ago
JSON representation
Service providing the engine for events based on scroll
- Host: GitHub
- URL: https://github.com/skybrud/sky-scroll
- Owner: skybrud
- License: mit
- Created: 2017-09-04T17:40:36.000Z (almost 9 years ago)
- Default Branch: master
- Last Pushed: 2018-10-04T09:44:42.000Z (over 7 years ago)
- Last Synced: 2025-08-16T07:31:25.361Z (10 months ago)
- Language: JavaScript
- Size: 106 KB
- Stars: 1
- Watchers: 8
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 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
```bash
npm install sky-scroll
```
or
```bash
yarn add sky-scroll
```
## Usage
Import and install SkyScroll:
```js
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:**
```html
{{$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:**
```js
export default {
name: 'ExampleComponent',
data() {
// ...
},
methods: {
// ...
},
$SkyScroll: {
// scroll [function]
// Callback for scroll event
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 [function]
// Callback for resize event
resize({ scroll, window, document }) {
console.log('scroll x', scroll.x);
console.log('window width', window.width);
console.log('document height', document.height);
},
// 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](http://www.skybrud.dk/). Feel free to use it in any way you want. Feedback, questions and bugreports should be posted as issues. Pull-requests appreciated!