modularscroll's Introduction

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

modularscroll's People

Contributors

Stargazers

Watchers

modularscroll's Issues

Can't get call event to work

I have the following...

<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
        <style>
            html, body{
                height: 100%;
                width: 100%;
                margin: 0;
                overflow: hidden;
            }
            #wrapper{
                height:100%;
                width:100%;
                overflow: auto;
            }
            .scroll-item{
                height: 100%;
                width: 100%;
            }
        </style>
    </head>
    <body>
        <div id="wrapper">
            <div id="test1"
                 class="scroll-item"
                 data-scroll
                 data-scroll-call="Test1">Simple Test 1</div>
            <div id="test2"
                 class="scroll-item"
                 data-scroll
                 data-scroll-call="Test2">Simple Test 2</div>
        </div>
        <script type="module">
            import modularScroll from "https://unpkg.com/[email protected]/dist/main.esm.js";
            const scroll = new modularScroll();
            scroll.on("call", args=>{
                console.log(`Called with ${JSON.stringify(args)}`)
            });
        </script>
    </body>

</html>

Actual Behavior

I do not see any console logs.

Expected Behavior

I see the original console log on load and the 2nd one when I scroll to it

Recommend Projects