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>