szager-chromium / IntersectionObserver

API Sketch for Intersection Observers
Apache License 2.0
6 stars 6 forks source link

add example of how to track visibility of an element (v2) #7

Open equalsJeffH opened 4 years ago

equalsJeffH commented 4 years ago

Is this a nominally correct usage of tackVisibility and isVisible ?

var options = {
    trackVisibility = true;
};

var observer = new IntersectionObserver(changes => {
  for (const change of changes) {
    console.log(change.time);               // Timestamp when the change occurred
    console.log(change.rootBounds);         // Unclipped area of root
    console.log(change.boundingClientRect); // target.boundingClientRect()
    console.log(change.intersectionRect);   // boundingClientRect, clipped by its containing block ancestors, and intersected with rootBounds
    console.log(change.intersectionRatio);  // Ratio of intersectionRect area to boundingClientRect area
    console.log(change.target);             // the Element target

    console.log(change.isVisble);       // the Element target **is visible or not**
  },
  options        //  this passes-in 'trackVisibility = true'
}, {});

// Watch for intersection events on a specific target Element.
observer.observe(target);

// Stop watching for intersection events on a specific target Element.
observer.unobserve(target);

// Stop observing threshold events on all target elements.
observer.disconnect();
szager-chromium commented 4 years ago

Sorry for the delayed response -- everything above looks correct, except that you must also include the 'delay' parameter in the options passed to the constructor; and the 'delay' parameter must have a value of at least 100.

See step 10 in the IntersectionObserver constructor steps here:

https://w3c.github.io/IntersectionObserver/v2/#dom-intersectionobserver-intersectionobserver