What does the isVisible property mean in intersectionObeserver API?

Question

Before lynching me in the comments hear me out.

The intersectionobserver is supposed to listen for when an element is scrolled into view right?

But when I do so the isVisible property is false, cant figure out why. I think its because Im not understanding isVisible property because the other properties are working.

Here is my code:

import React, { useRef, useEffect, useState, useContext } from 'react'
import ReactGA from 'react-ga';
import Context from '../utils/context'


const Home = props => {
  const context = useContext(Context)
  const [scrollState, setScroll] = useState(false)
  const intersectTarget = useRef(null)

  useEffect(() => {
    // ReactGA.pageview(props.location.pathname);
    if(!context.initialLoadProp) {
      context.setInitialLoadProp(true)
    }
  }, [])

  useEffect(() => {
    const opts = {
            root: null,
            rootMargin: '0px',
            threshold: 0
    }
    const callback = entry => {
        console.log(entry)
    }
    const observerScroll = new IntersectionObserver(callback, opts)

    observerScroll.observe(intersectTarget.current)
  }, [])

  return(
    <div>
      <img height="500px"
           width="500px"
           src="https://timedotcom.files.wordpress.com/2019/03/kitten-report.jpg" alt=""/>
      <div id="heading1" style={{height: '500px'}}>
        <h1>First Heading</h1>
      </div>
      <div style={{height: "500px"}}>
        <h1 ref={intersectTarget}
            id="heading2">
          Second Heading
        </h1>
      </div>
    </div>
  )
};

export default Home;

My output even thought isIntersecting is true isVisible is false.

Answer 1

The "isVisible" property is part of proposed Intersection Observer v2 updates concerning actual visibility of the target element to the user. When passing the options object to the observer you can include a "trackVisibility" boolean to implement it, but a corresponding "delay" property is also required. The value of this delay is in milliseconds and needs to be a minimum of 100. If the appropriate delay is not provided then you'll receive an error in the console and the observer will not have been initiated.

At this point I'm only aware of Chrome supporting this feature. So far I've been unable to actually get the visibility feature to work, the delay seems to work though. It's an experimental feature of an experimental feature.

Intersection Observer v2 article

Answer 2

To activate IntersectionObserver v2 isVisible feature, you must add two options as follows:

const options = {
    root: null,
    rootMargin: '0px',
    threshold: 0,

    /* required options*/
    trackVisibility: true,
    delay: 100              // minimum 100
}

Visibility is calculated as follows:

• If the observer's trackVisibility attribute is false, then the target is considered visible. This corresponds to the current v1 behavior.
• If the target has an effective transformation matrix other than a 2D translation or proportional 2D upscaling, then the target is considered invisible.
• If the target, or any element in its containing block chain, has an effective opacity other than 1.0, then the target is considered invisible.
• If the target, or any element in its containing block chain, has any filters applied, then the target is considered invisible.
• If the implementation cannot guarantee that the target is completely unoccluded by other page content, then the target is considered invisible.

Check IntersectionObserver v2 browser support before using it https://caniuse.com/#feat=intersectionobserver-v2

Answer 3

[note: I wrote the specification for IntersectionObserver and implemented it in Chrome].

As stated in previous answers, isVisible only has meaning if the browser supports IntersectionObserver V2 (currently, only chromium-based browsers, including Chrome and Edge); and if you include the 'trackVisibility' and 'delay' parameters when constructing the observer.

This is not considered to be an experimental feature in Chrome; it is a complete, stable feature used by large production websites. However, it is unclear when it will be supported by other browsers. The most up-to-date information about the browsers supporting this feature is here:

https://chromestatus.com/features/5878481493688320

If you think the feature could be improved, consider filing an issue in the spec repository:

https://github.com/w3c/IntersectionObserver/issues

Answer 4

According to https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserverEntry there is no isVisible property as far as I can see.

If your goal is to check when the element is completely in view, you can change the threshold to threshold: 1 and then check if the intersectionRatio is equal to one entry.intersectionRatio == 1.

I might have missed the isVisible somewhere but I cant find it.

Hope this helps!