Adding utility to test viewport visibility about vueuse HOT 4 CLOSED

My use case for a threshold is this page. I'd like to avoid rendering 3D content that is off the screen, but it might be nice to render it when it is soon to be on screen to avoid a flicker. This could be over-optimizing though, so why don't we keep it simple to start and return a boolean. If it turns out this is not enough, it'll be an easy option to add and won't be a breaking change.

I'll go ahead and make the changes you suggested in the PR, I like that better. I'm not sure what a use case is for knowing when something is partially in the viewport though 🤔

from vueuse.

Quick update, I was bored so I threw together a basic implementation. Let me know if there is anything you want to tweak. One thing that might be nice to add is a "threshold", so we can treat something as on-screen once it gets within 200px or whatever.

Also if you decide you don't want this util, just go ahead and close the issue/pr 👍

from vueuse.

It looks great, thank you for the proposal and implementation! I have left some comments in the PR, please have a look :)

For the threshold, I am not sure what use cases this utility would be. A basic one comes in my mind would be returning an invisible | partial | visible state. Another way with better controllability (but more complex and costly) might be returning an object with visibleArea visbileWidth visibleHeight visableState etc and let users decide how to handle those data.

What do you think?

from vueuse.

Sure, let's keep it simple first.

Awesome website btw :)

from vueuse.