Moving the element in the dom without scrolling does not recheck if the element is in the viewport about vue-in-viewport-mixin HOT 9 CLOSED

Doesn't work I'm afraid ):

from vue-in-viewport-mixin.

This has been released now: https://github.com/BKWLD/vue-in-viewport-mixin/releases/tag/v2.0.0

from vue-in-viewport-mixin.

Could you describe more what you mean by "moving in the dom"? Like touching CSS top / left with JS?

from vue-in-viewport-mixin.

Sure, sorry. I am using this for an auto scroller. When the element is in view, more content will be loaded. However, when that content is added to the dom, causing the autoscroller element to be pushed outside the viewport, inViewport.now will remain true until the user scrolls.

from vue-in-viewport-mixin.

What happens if you call updateInViewport() on the component you've mixed the package into AFTER the additional content has loaded? Does that update the state? If it doesn't, the next problem to solve is how to get scrollMonitor (a package this one consumes) to update it's measurements.

Perhaps you could call (if my first suggestion doesn't work):

this.scrollMonitor.recalculateLocation()
this.updateInViewport()

from vue-in-viewport-mixin.

The same problem.

• component loaded in viewport; inViewport.now === true
• another component loads big image and component now not in viewport; Still inVieport.now === true

inViewport.now properly recalculted if I do some scroll

this.scrollMonitor.recalculateLocation()
this.updateInViewport()

doesn't work

from vue-in-viewport-mixin.

I'm having the same issue.
I've got a grid with lots of products, so i'm loading only images of products in viewport (or almost). if i change the product order via button and javascript, it appears that the products now in viewport don't know their new state. at least not until the user scrolls again.

also i dont want to call a function for updating the inViewport everywhere i change the dom via javascript, the component should handle this by itself!

from vue-in-viewport-mixin.

Yeah, ScrollMonitor doesn't have an API method to fully recaculate itself ... like I haven't had a lot of success with it's recalculateLocation() method. However, I have done this on some projects to get it to recaculate:

window.dispatchEvent(new CustomEvent('resize'))

Essentially, I fake a resize event and this forces ScrollMonitor to reassess itself.

from vue-in-viewport-mixin.

I'll soon be releasing a breaking 2.0 version of this package that uses the IntersectionObserver and will fix issues like this since it's not scroll based. It's is on master right now: https://github.com/BKWLD/vue-in-viewport-mixin

from vue-in-viewport-mixin.