Menu
I am trying to research about vue2 and wondering if there is any way that can make it easy to track if elements are visible on viewport or not so that we can do something like slide-in boxes when we scroll down the page. Any npm package or whatsoever that can be suggested? Thanks.
379
Summary. Use the getBoundingClientRect() method to get the size of the element and its relative position to the viewport. Compare the position of the element with the viewport height and width to check if the element is visible in the viewport or not.
So even if it's a part of a element but it covers the full height of the screen, it should be 100% in viewport.
To check if an element is in the viewport in React. js: Set the ref prop on the element. Use the IntersectionObserver API to track if the element is intersecting.
To use document. getElementById in Vue. js, we can assign a ref to the element we want to get. And then we can use this.
Currently using Vue-observe-visibility (https://github.com/Akryum/vue-observe-visibility) and have not stumbled on any issues yet.
The only thing to consider is that this only triggers when the element enters/exits the page by user scroll, not when it enters/exists because of DOM changes. Looks like it shouldn't be an issue for your use case, based on what you told about it.
Certainly check it out, it's easy to use!
63
vue-waypoint could be an option.
GitHub
NPM
32
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
