When using this, im getting an error in IE11, saying: "Error in callback for watcher "inViewport.now": "TypeError: Object doesn't support this action"

Isn't it supported in IE11 ?

I'm getting the following error:
Uncaught TypeError: Cannot read property 'height' of null at VueComponent.updateInViewport (vendors-9734db2b5db5665331401bfd393f02d0.js:101585)

When using <keep-alive> to cache the <router-view> component, I believe there needs to be activated / deactivated hooks that make sure that the inViewportHandlers are added or removed

May be something to do with the Polyfill

I'm imagining a new API that is like:

import { makeInViewportMixin } from 'vue-in-viewport-mixin'
export default {
  mixins: [
    makeInViewportMixin({
      once: true,
      intersectionObserverOptions: {
        root: => document.getElementById('scroller')
      }
    })
  ]
}

Right now it removes listeners after the first scroll event. It should remove (or not add) if it is initially in viewport.

When we upgraded from 1.0.4 to 2.0.0, we had a small percentage of customers for whom no images loaded (ever, regardless of scrolling). It's impossible to know exactly how many, but based on how many reported it, I'd guess between 1 and 5%. Almost all of them reported the problem on Safari or Mobile Safari. We were never able to reproduce the issue. We rolled back to 1.0.4 and it appears to have resolved the issue; customers who couldn't see images can now see them and we've had no new reports of missing images.

With vuewport Mixinx is possibile to bind a different container that not is the BODY?
Becouse i have a container that scroll but is not the body of the page

Hello,

I have a div with x-scroll and it has some components inside it.

I am trying to do something if a component is shown (when I scroll to right) but inViewport.now returns true for all components in the main div.

Am I missing something or it doesn't work for x-scroll stuff?

Thanks in advance.

Perhaps you could put inViewport.now etc. in computed rather than data, and check if the position has moved (and if so, update) before returning?

Since this gets added to many elements and has a callback that gets called on every scroll, I'm extra concerned about performance. In 19f7308 a new check for whether an element was fully visible got added.

I think a faster approach would be to change the visibility.isInViewport() to like visibility.check() which returns an object with keys like:

inViewport: true
entirelyInViewport: false

ScrollMonitor has these:

• elementWatcher.isInViewport - true if any part of the element is visible, false if not.
• elementWatcher.isFullyInViewport - true if the entire element is visible [1].
• elementWatcher.isAboveViewport - true if any part of the element is above the viewport.
• elementWatcher.isBelowViewport - true if any part of the element is below the viewport.
• elementWatcher.top - distance from the top of the document to the top of this watcher.
• elementWatcher.bottom - distance from the top of the document to the bottom of this watcher.
• elementWatcher.height - top - bottom.

I think the visibility.check() returns all of these pairs and then mixes them into data on the model so there is only 1 getBoundingClientRect() check and we infer as much stuff as we could possibly need out of it.

Working on a Nuxt custom module, I register globally the mixin in a plugin with Vue.mixin(inViewport)
When first loading my page with 3 components using the watcher I get this error:

IntersectionObserver constructor: Element of sequence branch of (double or sequence) is not a finite floating-point value.

If the webpack hot reloader rebundles the error disappears and it all works well...
Can't we use the mixin globally?

If you are tracking a 100vh item and you scroll from it being below to above the viewport fast, IntersectionObserver doesn't update the handler at all ... like it can miss responding to the scroll even with a threshold that includes 1.

I may need to add a scroll event listener when in viewport to track these things ... do I bring scrollMonitor back for this? Or maybe scroll mediator?

I wonder if it would be possible to use this on elements w/in the component, similar to the viewport directive you've made where I can just add the directive anywhere.

Maybe for example w/in my component I add a :in-viewport-child='identifier' and then my watch of inViewport.now is passed that value as a second argument along with visible.

watch: {
  'inViewport.now' (visible, child) {
  }

Or maybe a second type to watch, inViewport.child, this way the feature is a bit more backwards compatible.

I'd definitely find this pretty helpful.

Does the same stuff as our window mediator does:

https://github.com/stutrek/scrollMonitor

Advantages:

• Maybe faster than ours?
• Additional events, like for partially and fully entered
• The lock stuff is cool

Disadvantage:

• No percentage offset

Since it is my first message here: thank you for this great piece of software!

I noticed random (?) IntersectionObserver constructor errors because the threshold array (passed to the constructor) is sometimes containing -Infinity. This is coming from a division by target.height that equals 0 (see attached screenshots below, with various debugger watches).
Honestly I don't know how I can help any further but if you can suggest me additional investigations, I would be happy to be "remote controlled" :)

I have tried use this mixin, but when I import using require(), I get this error:

Module parse failed: ./~/vue-in-viewport-mixin/index.coffee Unexpected character '#' (1:0) You may need an appropriate loader to handle this file type.

Is there a reason elements aren't updated on mount? I was hoping the default state would be updated when the component is rendered.

Hi, I updated this mixing to make it compatible with Vue 3.
Only old option syntax is supported as my goal was to enable Vue 3 based projects to quickly migrate without refactoring code that uses this mixin.
I also migrated project to latest version of Storybook.
Tests run ok and I'm already using it in my Vue 3 based work project.
I didn't updated Cypress too as default support for Coffescript have been dropped starting from version 4.x.

As my changes break compatibility with Vue 2, this can be considered version 3 of the mixin.
Could any maintainer kindly give me permission to open a branch and do a PR?

if i use this mixin in a component, and then put something like print_hidden from tailwindcss above or on that component, i get the following error:

TypeError: Failed to construct 'IntersectionObserver': The provided double value is non-finite.
    at VueComponent.addInViewportHandlers (index.js:526)
    at VueComponent.inViewportInit (index.js:514)
    at VueComponent.reInitInViewportMixin (index.js:509)
    at VueComponent.inViewportThresholdWithMax (index.js:500)
    at Watcher.run (commons.app.js:14062)
    at flushSchedulerQueue (commons.app.js:13804)
    at Array.<anonymous> (commons.app.js:11485)
    at flushCallbacks (commons.app.js:11411)

the line that triggers it:

      this.inViewportObserver = new IntersectionObserver(this.updateInViewport, {

Hi guys,

Awesome project!

Newbie with Vue.js here!

I was wondering if this mixin can help me detect if one of the components child, an HTML element, is in view-port.

I have a really tall component (a form with lots of inputs and I want to know when the user is close to an input so that I can show some helpers).

Thanks!