I would the top side of the ponent to be observed relatively to the to side of the viewport. The aim is to trigger a callback when 20% of the ponent is visible.

I have seen on developer.mozilla that by default the API observes also the target from the top of the root. You can see an example on this page:

So I have decided when 80% of my top ponent will leave the viewport to trigger a callback. Here my snippet:

let options = {  
            threshold: 0.8
        }
this.observer = new IntersectionObserver(()=> console.log("active intersection!"));
this.observer.observe(this.accueil.current.top.current, options);

But seems so far that my application only appreciate the intersection from the bottom boundary of the root.

Also, this.accueilTop.current is a children passed to the parent in which I have implemented the intersectionObserver by transmitting the child ref to the parent ponent.

Snippet of the ref transferring here:

{React.createRef() ...}

parent:

  <Accueil ref={this.accueil} />

child:

 <div ref={this.top}/>

So that it,

any hint would be great, thanks

I would the top side of the ponent to be observed relatively to the to side of the viewport. The aim is to trigger a callback when 20% of the ponent is visible.

I have seen on developer.mozilla that by default the API observes also the target from the top of the root. You can see an example on this page: https://developer.mozilla/en-US/docs/Web/API/Intersection_Observer_API

So I have decided when 80% of my top ponent will leave the viewport to trigger a callback. Here my snippet:

let options = {  
            threshold: 0.8
        }
this.observer = new IntersectionObserver(()=> console.log("active intersection!"));
this.observer.observe(this.accueil.current.top.current, options);

But seems so far that my application only appreciate the intersection from the bottom boundary of the root.

Also, this.accueilTop.current is a children passed to the parent in which I have implemented the intersectionObserver by transmitting the child ref to the parent ponent.

Snippet of the ref transferring here:

{React.createRef() ...}

parent:

  <Accueil ref={this.accueil} />

child:

 <div ref={this.top}/>

So that it,

any hint would be great, thanks

• javascript
• reactjs

Share Improve this question Follow edited May 16, 2019 at 0:13 Diagathe Josué asked May 15, 2019 at 22:49 Diagathe JosuéDiagathe Josué 12.2k1414 gold badges4949 silver badges9393 bronze badges 8

• Code snippets aren't as useful if we can't see how they are connected. We can't see where and when it is called. It is fine to reduce it to the relevant parts but it should still be valid and plete to run on its own if possible so others can test it in a sandbox or on their machine. So please do not omit the surrounding parts like ponent and function definitions. – trixn Commented May 15, 2019 at 23:05
• it works on sandbox, so maybe I have a ponent in my application which cover the children, here the sandbox: codesandbox.io/s/youthful-platform-x933g, I have some tooltip and all in the real ponent that drop on the whole page when click, maybe one of theses block the interaction with the observer, or something like that – Diagathe Josué Commented May 15, 2019 at 23:23
• You passed the options to the wrong function and you need a threshold of 0.2. See my answer with a working example. – trixn Commented May 15, 2019 at 23:39
• thanks, I meant 20% of the ponent leaving and 80% appearing, I have corrected my post :). – Diagathe Josué Commented May 16, 2019 at 0:13
• Okay so did you check my answer and does that work for you? – trixn Commented May 16, 2019 at 5:03

 |  Show 3 more ments

2 Answers 2

Sorted by: Reset to default 2

You can use entry.boundingClientRect which tells your bottom is in viewport or not. If bottom is less than 0, it's not in viewport, also if bottom is greater than window size, it's not in view port.

Also threshold check must be on each scroll when it's in viewport, slicing to each 10%.

    const observer = new IntersectionObserver(entries => {
      entries.forEach(entry => { 
        const bcr = entry.boundingClientRect;
        const isBottomVisible = (bcr.bottom < window.innerHeight) && bcr.bottom;
        console.log(bcr.top, bcr.bottom, window.innerHeight, {isBottomVisible});
      });
    }, {threshold: Array(11).fill().map( (_, i) => i*.1)});
    observer.observe(this._templateContainer );

According to the documentation .observe() only takes one argument which is the element to observe. You probably meant to pass the options object to the call of the constructor of the IntersectionObserver rather then to .observe():

let options = {threshold: 0.2};

this.observer = new IntersectionObserver(
    () => console.log("active intersection!"), 
    // options must go here
    options,
);

this.observer.observe(this.accueil.current.top.current);

Also if your goal is to trigger the callback when 80% of your element left the viewport you actually have to set the threshold to 0.2. That means the callback will be called when 20% of your element is visible which is the same as 80% being invisible.