Dead simple elements in viewport detection.
npm install modularscroll
- Simple
- Lightweight
- High performance
- No dependencies
import modularScroll from 'modularscroll';
this.scroll = new modularScroll();
<h1 data-scroll>Hello</h1>
<p data-scroll>Text</p>
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>
import modularScroll from 'modularscroll';
this.scroll = new modularScroll();
this.scroll.update();
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>
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. |
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. |
Method |
Description |
init() |
Reinit the scroll. |
update() |
Update elements position. |
destroy() |
Destroy the scroll events. |
Event |
Arguments |
Description |
call |
func |
Trigger if in-view. Returns your string or array if contains , . |