onExitViewport?

[sbtly]

I want to fire event when a component fully enters, and fully exits. I can do fully enter event by adjusting threshold, but I can't use it together with fully exit event. It would be really nice to have onExitViewport(or onFullyLeaveViewport), and even onFullyEnterViewport as well.

[roderickhsiao]

Does it not working now for onLeaveViewport? The onLeaveViewport and onEnterViewport should be the callback you want to use and you can adjust threshold and rootMargin based on your need.

Would you mind to provide a minimal working example?

The example here https://roderickhsiao.github.io/react-in-viewport/?path=/story/enter-and-leave-callback--class-based-component onLeaveViewport got called after component fully leave the viewport.

Thanks

[sbtly]

Right now, if I set threshold to 0, onLeaveViewport fires when target fully exits.(like I wanted) But onEnterViewport fires when target is partially visible.(not what I want)

If I set threshold to 1, onEnterViewport fires when target fully enters,(like I wanted) but onLeaveViewport fires when the target partially leaves.(not what I want)

I want the target to fire events only twice. When target fully exits, and target fully enters.

I made a working example below. You can toggle between line 13, 14 to adjust threshold and check console. https://codesandbox.io/s/cocky-ishizaka-louud?fontsize=14

[roderickhsiao]

Thanks for the example,

the support might be slightly complicated as Intersection Observer fires the event only by the threshold which has opposite meaning of what we are looking here

threshold: 0 (default) - onEnter will trigger at intersectionRatio: 0 where we are expected intersectionRatio: 1. onLeave is what we expected fully leave now.

threshold: 1 - onEnter expected, but onLeave will be trigger at intersectionRatio: 1 (fire immediately)

The best we could try here is passing threshold: [0, 1] to intersection observer, so it will trigger on both point, and we fire twice onEnter/onLeave callback (currently we will only fired once even you passes array of multiples threshold).

From the library point of view, it might be hard to guess what client user needs, we could potentially just pass down intersectionRatio so client can handle the fully exist/enter based on the value.

[sbtly]

Thank you for the comment.

Do you plan on supporting this function? I'm really, desperate to use this library 😢

It could work with passing threshold array or intersectionRatio like you mentioned, but I personally prefer to use it like onFullyEnterViewport and onFullyExitViewport.

BTW, there's a function named isFullyInViewport in a 'scrollmonitor' library, and it's really useful. I hope this library has it too.

[roderickhsiao]

@sbtly scrollmonitor is using custom calculation of bounding box so there is full control over the callback definition.

The library here solely rely on interaction observer to monitor and trigger the callback when by different threshold. Browser won't trigger the callback on item fully exist/enter if you just pass in a single value of threshold (either 1 or 0) as comment above. (the library doesn't have visibility to the scroll position if browser doesn't fire the change event)

And this library intent to minimized the custom calculation/listener to scroll position and just utilized browser API to have better performance.

You will need to pass in an array of threshold anyway in order to make the library notified by browser the scroll position changes