Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
equalsJeffH opened this issue Nov 16, 2019 · 2 comments
Open

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

equalsJeffH opened this issue Nov 16, 2019 · 2 comments

Comments

@equalsJeffH
Copy link

No description provided.

@equalsJeffH equalsJeffH changed the title add example of how to track visibility of an element add example of how to track visibility of an element (v2) Nov 16, 2019
@equalsJeffH
Copy link
Author

equalsJeffH commented Nov 16, 2019

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
Copy link
Owner

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants