intersectionobserver

1var options = {
2  root: document.querySelector('#scrollArea'),
3  rootMargin: '0px',
4  threshold: 1.0
5}
6
7var observer = new IntersectionObserver(callback, options);

1// super class that can be mixed into any JS class based object
2// in order to add an intersection / visibility observer to it
3// example code is for adding to a web component (LitElement optimized)
4const IntersectionObserverMixin = function (SuperClass) {
5  // SuperClass so we can write any web component library / base class
6  return class extends SuperClass {
7    /**
8     * Constructor
9     */
10    constructor() {
11      super();
12      // listen for this to be true in your element
13      this.elementVisible = false;
14      // threasholds to check for, every 25%
15      this.IOThresholds = [0.0, 0.25, 0.5, 0.75, 1.0];
16      // margin from root element
17      this.IORootMargin = "0px";
18      // wait till at least 50% of the item is visible to claim visible
19      this.IOVisibleLimit = 0.5;
20      // drop the observer once we are visible
21      this.IORemoveOnVisible = true;
22      // delay in observing, performance reasons for minimum at 100
23      this.IODelay = 100;
24    }
25    /**
26     * Properties, LitElement format
27     */
28    static get properties() {
29      let props = {};
30      if (super.properties) {
31        props = super.properties;
32      }
33      return {
34        ...props,
35        elementVisible: {
36          type: Boolean,
37          attribute: "element-visible",
38          reflect: true,
39        },
40      };
41    }
42    /**
43     * HTMLElement specification
44     */
45    connectedCallback() {
46      if (super.connectedCallback) {
47        super.connectedCallback();
48      }
49      // setup the intersection observer, only if we are not visible
50      if (!this.elementVisible) {
51        this.intersectionObserver = new IntersectionObserver(
52          this.handleIntersectionCallback.bind(this),
53          {
54            root: document.rootElement,
55            rootMargin: this.IORootMargin,
56            threshold: this.IOThresholds,
57            delay: this.IODelay,
58          }
59        );
60        this.intersectionObserver.observe(this);
61      }
62    }
63    /**
64     * HTMLElement specification
65     */
66    disconnectedCallback() {
67      // if we have an intersection observer, disconnect it
68      if (this.intersectionObserver) {
69        this.intersectionObserver.disconnect();
70      }
71      if (super.disconnectedCallback) {
72        super.disconnectedCallback();
73      }
74    }
75    /**
76     * Very basic IntersectionObserver callback which will set elementVisible to true
77     */
78    handleIntersectionCallback(entries) {
79      for (let entry of entries) {
80        let ratio = Number(entry.intersectionRatio).toFixed(2);
81        // ensure ratio is higher than our limit before trigger visibility
82        if (ratio >= this.IOVisibleLimit) {
83          this.elementVisible = true;
84          // remove the observer if we've reached our target of being visible
85          if (this.IORemoveOnVisible) {
86            this.intersectionObserver.disconnect();
87          }
88        }
89      }
90    }
91  };
92};

1const numSteps = 20.0;
2
3let boxElement;
4let prevRatio = 0.0;
5let increasingColor = "rgba(40, 40, 190, ratio)";
6let decreasingColor = "rgba(190, 40, 40, ratio)";
7
8// Set things up
9window.addEventListener("load", (event) => {
10  boxElement = document.querySelector("#box");
11
12  createObserver();
13}, false);