modularscroll

Dead simple elements in viewport detection.

Usage no npm install needed!

<script type="module">
  import modularscroll from 'https://cdn.skypack.dev/modularscroll';
</script>

README

modularScroll

Dead simple elements in viewport detection.

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