ep-io-scroller

0.0.8 • Public • Published

EP Intersection Observer Scroller

A small wrapper around Intersection Observer API. This module is developed to be used in other projects by creating a custom instance and passing it all the necessary options. It Loads a Polyfill if necessary.

This proyect is about the JavaScript part. You will need a bit of CSS to make your custom element be fixed on top and all that stuff.

API (WIP)

Options:

  • debug: logs which element enters and which one exits.
  • onEnter: function that is called when an element comes into view.
  • onExit: function that is called when an element exits the view.
  • background: CSS selector of the parent element.
  • foreground: collection of elements to be observed.
  • observerOpts: native options passed to the IntersectionObserver constructor.
  • observeOnce: default false. the observer observes the elements only once. Useful when you want to instantiate a chart.

EPIOScroller.callback

Callback that fires when an element enters or is near the viewport. This function receives three arguments:

  • The DOMElement that enters the viewport.
  • The index that this element assumes in the array that we pass to the foreground property. Even some of them are not visible.
  • The data attributes of the element if any.

Installation

Exposes the EPIOScroller global:

<script src="https://ep00.epimg.net/infografias/js/ep-io-scroller/EPIOScroller.js"></script>
<!-- or the minified version-->
<script src="https://ep00.epimg.net/infografias/js/ep-io-scroller/EPIOScroller.min.js"></script>

ES6 modules

npm install ep-io-scroller --save

And then import/require it:

import EPIOScroller from "EPIOScroller";
const EPIOScroller = require("EPIOScroller");

Example

<script>
  const wrapper = document.querySelector(".wrapper");
  const scroller = new EPIOScroller({
    background: background,
    foreground: background.querySelectorAll(".section"),
    observeOnce: false,
    debug: false,
    observerOpts: {
      rootMargin: "0px 0px -100px 0px",
    },
    onEnter: (el, index, data) => {
      console.log("Enter");
      console.log({ el, index, data });
    },
    onExit: (el, index, data) => {
      console.log("Exit");
      console.log({ el, index, data });
    },
  });
</script>

Package Sidebar

Install

npm i ep-io-scroller

Weekly Downloads

1

Version

0.0.8

License

MIT

Unpacked Size

119 kB

Total Files

11

Last publish

Collaborators

  • luissevillano