Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/modularorg/modularscroll
♢ Dead simple elements in viewport detection.
https://github.com/modularorg/modularscroll
in-view javascript scroll viewport
Last synced: about 2 months ago
JSON representation
♢ Dead simple elements in viewport detection.
- Host: GitHub
- URL: https://github.com/modularorg/modularscroll
- Owner: modularorg
- License: mit
- Created: 2019-01-10T04:38:43.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2019-06-20T18:39:46.000Z (over 5 years ago)
- Last Synced: 2024-08-31T17:40:01.926Z (4 months ago)
- Topics: in-view, javascript, scroll, viewport
- Language: JavaScript
- Homepage:
- Size: 17.6 KB
- Stars: 70
- Watchers: 3
- Forks: 3
- Open Issues: 0
-
Metadata Files:
- Readme: readme.md
- License: license
Awesome Lists containing this project
README
modularScroll
Dead simple elements in viewport detection.
## Installation
```sh
npm install modularscroll
```
## Why
- Simple
- Lightweight
- High performance
- No dependencies
## Usage
```js
import modularScroll from 'modularscroll';
this.scroll = new modularScroll();
```
```html
Hello
Text
```
#### With options
```js
import modularScroll from 'modularscroll';
this.scroll = new modularScroll({
el: document,
name: 'scroll',
class: 'is-inview',
offset: 0,
repeat: false
});
```
```html
Hello
Text
```
#### With methods
```js
import modularScroll from 'modularscroll';
this.scroll = new modularScroll();
this.scroll.update();
```
#### With events
```js
import modularScroll from 'modularscroll';
this.scroll = new modularScroll();
this.scroll.on('call', (func) => {
this.call(...func); // Using modularJS
});
```
```html
Trigger
```
## Options
| Option | Type | Default | Description |
| ------ | ---- | ------- | ----------- |
| `el` | `object` | `document` | Scroll container element. |
| `name` | `string` | `'scroll'` | Data attributes name. |
| `class` | `string` | `'is-inview'` | Elements in-view class. |
| `offset` | `number` | `0` | In-view trigger offset. |
| `repeat` | `boolean` | `false` | Repeat in-view detection. |
## Attributes
| Attribute | Values | Description |
| --------- | ------ | ----------- |
| `data-scroll` | | Detect if in-view. |
| `data-scroll-class` | `string` | Element in-view class. |
| `data-scroll-offset` | `number` | Element in-view trigger offset. |
| `data-scroll-repeat` | `true`, `false` | Element in-view detection repeat. |
| `data-scroll-call` | `string` | Element in-view trigger call event. |
## Methods
| Method | Description |
| --------- | ----------- |
| `init()` | Reinit the scroll. |
| `update()` | Update elements position. |
| `destroy()` | Destroy the scroll events. |
## Events
| Event | Arguments | Description |
| ----- | --------- | ----------- |
| `call` | `func` | Trigger if in-view. Returns your `string` or `array` if contains `,`. |