Installation

npm install modularscroll

Why

• Simple
• Lightweight
• High performance
• No dependencies

Usage

import modularScroll from 'modularscroll';

this.scroll = new modularScroll();

<h1 data-scroll>Hello</h1>
<p data-scroll>Text</p>

With options

import modularScroll from 'modularscroll';

this.scroll = new modularScroll({
    el: document,
    name: 'scroll',
    class: 'is-inview',
    offset: 0,
    repeat: false
});

<h1 data-scroll data-scroll-repeat>Hello</h1>
<p data-scroll data-scroll-offset="60">Text</p>

With methods

import modularScroll from 'modularscroll';

this.scroll = new modularScroll();

this.scroll.update();

With events

import modularScroll from 'modularscroll';

this.scroll = new modularScroll();

this.scroll.on('call', (func) => {
    this.call(...func); // Using modularJS
});

<div data-scroll data-scroll-call="function, module">Trigger</div>

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 ,. |